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■ love the Internet, and if you picked up this book, you probably do, too. The 
*g Internet is dynamic, chaotic, exciting, interesting, and useful, all at the same 
time. The Web is pretty fun from a user's point of view, but that's only part of 
the story. Perhaps the best part of the Internet is how participatory it is. You 
can build your own content — for free! It's really amazing. There's never been a 
form of communication like this before. Anyone with access to a minimal PC 
and a little bit of knowledge can create his or her own homestead in one of the 
most exciting platforms in the history of communication. 

The real question is how to get there. A lot of Web development books are 
really about how to use some sort of software you have to buy. That's okay, 
but it's not necessary. Many software packages have evolved that purport to 
make Web development easier. Some work pretty well, but regardless what 
software package you use, there's still a need to know what's really going on 
under the surface. That's where this book comes in. 

You'll find out exactly how the Web works in this book. You'll figure out how 
to use various tools, but, more importantly, you'll create your piece of the 
Web. You'll discover: 

♦ How Web pages are created: You'll figure out the basic structure of 
Web pages. You'll understand the structure well because you build 
pages yourself. No mysteries here. 

♦ How to separate content and style: You'll understand the foundation of 
modern thinking about the Internet — that style should be separated 
from content. 

♦ How to use Web standards: The current Web is pretty messy, but, 
finally, some standards have arisen from the confusion. You'll discover 
how these standards work and how you can use them. 

♦ How to create great-looking Web pages: Of course, you want a terrific- 
looking Web site. With this book, you'll find out how to use layout, style, 
color, and images. 

♦ How to build modern layouts: Many Web pages feature columns, 
menus, and other fancy features. You'll figure out how to build all these 
things. 

♦ How to add interactivity: Adding forms to your pages, validating form 
data, and creating animations are all possible with the JavaScript language. 

♦ How to write programs on the server: Today's Web is powered by pro- 
grams on Web servers. You'll discover the powerful PHP language and 
figure out how to use it to create powerful and effective sites. 
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How to harness the power of data: Every Web developer eventually 
needs to interact with data. You'll read about how to create databases 
at work. You'll also discover how to connect databases to your Web 
ges and how to create effective and useful interfaces. 



How AJAX is changing everything: The hottest Web technology on the 
horizon is AJAX (Asynchronous JavaScript And XML). You'll figure out 
how to harness this way of working and use it to create even more pow- 
erful and interesting applications. 



No Experience Necessary 

I'm not assuming anything in this book. If you've never built a Web page 
before, you're in the right hands. You don't need any experience, and you 
don't have to know anything about HTML, programming, or databases. I dis- 
cuss everything you need. 



If you're reasonably comfortable with a computer (you can navigate the Web 
and use a word processor), you have all the skills you need. 



Great for Advanced Folks, Too! 

If you've been around Web development for a while, you'll still find this book 
handy. 

If you've used HTML but not XHTML, see how things have changed and dis- 
cover the power of the XHTML/CSS combination. 

If you're still using table-based layouts, you'll definitely want to read about 
newer ways of thinking. After you get over the difference, you'll be amazed at 
the power, the flexibility, and the simplicity of CSS-based layout and design. 

If you're already comfortable with XHTML and CSS, you're ready to add Java- 
Script functionality for form validation and animation. If you've never used a 
programming language before, JavaScript is a really great place to start. 

If you're starting to get serious about Web development, you've probably 
already realized that you'll need to work with a server at some point. PHP is 
a really powerful, free, and easy language that's extremely prominent in the 
Web landscape. You'll use this to have programs that send e-mails, store and 
load information from files, and work with databases. 

If you're messing with commercial development, you'll definitely need to 
know more about databases. I get e-mails every week from companies look- 
ing for people who can create a solid relational database and connect it to a 
Web site with PHP. 



Don't Buy Any Software 



If you're curious about AJAX, you can read about what it is, how it works, 
and how to use it to add functionality to your site. You'll also read about a 
'erful and easy AJAX library that can add tremendous functionality 
>ag of tricks. 

I wrote this book as the reference I wish I had. If you have only one Web 
development book on your shelf, this should be the one. Wherever you are 
in your Web development journey, you can find something interesting and 
new in this book. 



Use Any Computer 

One of the great things about Web development is how accessible it can be. 
You don't need a high-end machine to build Web sites. Whatever you're using 
now will probably do fine. I built most of the examples in this book with 
Windows XP and Fedora Core Linux, but a Mac is perfectly fine, too. Most of the 
software I use in the book is available for free for all major platforms. Similar 
alternatives for all platforms are available in the few cases when this isn't true. 

bon't Buy Any Software 

Everything you need for Web development is on the CD-ROM. I've used only 
open-source software for this book. The CD contains a ton of tools and helpful 
programs. See Appendix A in the back of this book for a complete listing. 
Following are the highlights: 

♦ Aptana: A full-featured programmer's editor that greatly simplifies creating 
Web pages, CSS documents, and code in multiple languages. 

♦ Firefox extensions: I've included several extensions to the Firefox Web 
browser that turn it into a thoroughbred Web development platform. The 
Web Developer toolbar adds all kinds of features for creating and testing 
pages; the HTML Validator checks your pages for standards-compliance; 
and the Firebug extension adds incredible features for JavaScript and 
AJAX debugging. 

♦ XAMPP: When you're ready to move to the server, XAMPP is a complete 
server package that's easy to install and incredibly powerful. This includes 
the amazing Apache Web server, the PHP programming language, the 
MySQL database manager, and tons of useful utilities. 

♦ Useful tools: Every time I use a tool (such as a data mapper, a diagram 
tool, or an image editor) in this book, I make it available on the CD-ROM. 
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HoW This Book Is Organized 



There's no need to buy any expensive Web development tools. Everything 
you need is here, and they're not any harder than the more expensive Web 



Web development today is about solving a series of connected but different 
problems. This book is organized into eight minibooks based on specific 
technologies. You can read them in any order you wish, but you'll find that 
the later books tend to rely on topics described in the earlier ones. (For 
example, JavaScript doesn't make much sense without XHTML because it's 
usually embedded in a Web page.) The following describes these eight 
minibooks: 

♦ Book I: Creating the XHTML Foundation — Web development incorpo- 
rates a lot of languages and technologies, but HTML is the foundation. Here 
I show you XHTML, the latest incarnation of HTML, and describe how it's 
used to form the basic skeleton of your pages. 

♦ Book II: Styling with CSS — In the old days, HTML had a few tags to 
spruce up your pages, but they weren't nearly powerful enough. Today 
developers use Cascading Style Sheets (CSS) to add color and formatting 
to your pages. 

♦ Book III: Using Positional CSS for Layout — Discover the best ways to 
set up layouts with floating elements, fixed positioning, and absolute 
positioning. Figure out how to build various multicolumn page layouts 
and how to create dynamic buttons and menus. 

♦ Book IV: Client^Side Programming with JavaScript — Figure out essential 
programming skills with the easy and powerful JavaScript language — 
even if you've never programmed before. Manipulate data in Web forms 
and use powerful regular expression technology to validate form entries. 
Also discover how to create animations with JavaScript. 

♦ Book V: Server-Side Programming with PHP — Move your code to the 
server and take advantage of this powerful language. Figure out how to 
respond to Web requests; work with conditions, functions, objects, and 
text files; and connect to databases. 

♦ Book VI: Databases with MySQL — Most serious Web projects are even- 
tually about data. Figure out how databases are created, how to set up a 
secure data server, the basics of data normalization, and how to create a 
reliable and trustworthy data back end for your site. 




How) This Book Is Organized 



Icons Used in This Book 



5 



mat n 

DropBocto 

reallv 



♦ Book VII: Into the Future with AJAX — Look forward to the technology 
that has the Web abuzz. AJAX isn't really a language but rather a new 

of thinking about Web development. Get the skinny on what's going 
re, build an AJAX connection or two by hand, and read about some 
really cool libraries for adding advanced features and functionality to 
your pages. 

♦ Book VIII: Moving from Web Pages to Web Sites — This minibook ties 
together many of the threads throughout the rest of the book. Discover 
how to create your own complete Web server solution or pick a Web 
host. Walk through the process of designing a complex multi-page Web site. 
Discover how to use content management systems to simplify complex 
Web sites and, finally to build your own Content Management System 
with skills taught throughout the book. 
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This is a For Dummies book, so you have to expect some snazzy icons, right? 
I don't disappoint. Here's what you'll see: 

This is where I pass along any small insights I may have gleaned in our travels. 



I can't really help being geeky once in a while. Every so often I want to 
explain something a little deeper. Read this to impress people at your next 
computer science cocktail party or skip it if you really don't need the details. 



A lot of details are here. I point out something important that's easy to forget 
with this icon. 



Watch out! Anything I mark with this icon is a place where things have blown 
up for me or my students. I point out any potential problems with this icon. 



A lot of really great examples and software are on the CD. Whenever I men- 
tion software or examples that are available on the CD, I highlight it with this 
icon. 
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hat's really up to you. I sincerely believe you can use this book to turn 
top-notch Web developer. That's our goal for you. 



Although this is a massive book, there's still more to figure out. If you have 
questions or just want to chat, feel free to e-mail at andy@aharrisbooks . 
net. You can also visit my Web site at www. aharrisbooks . net for code 
examples, updates, and other good stuff. (You can also visit www . dummies . 
com/go/htmlxhtmlcssaiof d for code examples from the book.) 



I try hard to answer all reader e-mails but sometimes I get behind. Please be 
patient with me, and I'll do my best to help. 

I can't wait to hear from you and see the incredible Web sites you develop. 
Have a great time, discover a lot, and stay in touch! You can contact me at 

andy@aharrisbooks .net. 
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In This Chapter 

v Creating a basic Web page 

e* Understanding the most critical HTML tags 

Setting up your system to work with HTML 

Viewing your pages 



rhis chapter is your first introduction to building Web pages. Before this 
slim chapter is finished, you'll have your first page up and running. 
Creating a basic page isn't difficult, but building pages in a way that grows 
and expands as you get more sophisticated takes a little foresight. Most of 
this book uses the XHTML standard. In this first chapter, I show part of an 
older standard called HTML. HTML is a little bit easier to start with, and 
everything I show in this chapter translates perfectly to the XHTML you'll 
use throughout the book. 

In this minibook, you discover the modern form of Web design using 
XHTML. Your Web pages will be designed from the ground up, which makes 
them easy to modify and customize. As you figure out more advanced tech- 
niques throughout this book, you'll take the humble pages you discover in 
this chapter and make them do all kinds of exciting things. 



Creating a Basic Paqe 

Here's the great news: The most important Web technology you need is also 
the easiest. You don't need any expensive or complicated software, and you 
don't need a powerful computer. You probably have everything you need to 
get started already. 

No more talking! Fire up a computer and let's build a Web page! 

/. Open a text editor. 

You can use any text editor you want, as long as it lets you save files as 
plain text. If you're using Windows, Notepad is fine for now. (Later, I 
show you some other free alternatives, but start with something you 
already know.) 
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$i\NG/ Don't use a word processor like Microsoft Word. It doesn't save things in 

the right format, and all the nifty features, like fonts and centering, don't 
ork right. I promise that you'll figure out how to do all that stuff but 
thout using a word processor. Even the Save as HTML feature doesn't 
work right. You really need a very simple text editor, and that's it. In 
Chapter 3 of this minibook, I show you a few more editors that make 
your life easier. You'll never use Word. 

2. Type the following code. 

Really. Type it in your text editor so you get some experience writing the 
actual code. I explain very soon what all this means, but type it now to 
get a feel for it: 

<html> 
<head> 

<!-- myFirst.html --> 

<title>My very first Web page ! </title> 
</head> 

<body> 

<hl>This is my first Web page!</hl> 

<P> 

This is the first Web page I've ever made, 
and I'm extremely proud of it. 
It is so cool! 
</p> 

</body> 
</html> 

3. Save the file as myFirst .html. 

It's important that your filename has no spaces and ends with the . html 
extension. Spaces cause problems on the Internet (which is, of course, 
where all good pages go to live), and the . html extension is how most 
computers know that this file is an HTML file (which is another name for 
a Web page). It doesn't matter where you save the file, as long as you 
can find it in the next step. 

It. Open your Web browser. 

The Web browser is the program used to look at pages. After you post 
your page on a Web server somewhere, your Great Aunt Gertrude uses a 
Web browser to view your page. You also need one (a browser, not a 
Great Aunt Gertrude) to test your page. For now, use whatever browser 
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you ordinarily use. Most Windows users already have Internet Explorer Book I 

installed. If you're a Mac user, you probably have Safari. Linux folks gen- Chapter 1 
have Firefox. Any of these are fine. In Chapter 3 of this minibook, I 
in why you probably need more than one browser and how to con- 
figure them for maximum usefulness. 



5. Load your page into the browser. 

You can do this in a number of ways. You can use the browser's File 
menu to open a local file, or you can simply drag the file from your 
Desktop (or wherever) to the open browser window. 

6. Bask in your newfound genius. 

Your simple text file is transformed! If all went well, it looks like Figure 1-1. 
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This is my first web page! 

Tliis is the first web page I've ever made, and I'm extremely proud of it. It is so cool! 




Figure 1-1: 

Congrat- 
ulations! 
You're now 
a Web 
developer! 
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ge you create in the previous section uses an extremely simple notation - 
(Hypertext Markup Language), which has been around since the 
beginning of the Web. HTML is a terrific technology for several reasons: 



♦ It uses plain text. Most document systems (like word processors) use 
special binary encoding schemes, which incorporate formatting directly 
into the computer's internal language. This means that a document 
becomes locked into a particular computer or software. That is, a docu- 
ment stored in Word format can't be read without a program that under- 
stands Word formatting. HTML gets past this problem by storing 
everything in plain text. 

♦ It works on all computers. The main point of HTML is to have a univer- 
sal format. Any computer should be able to read and write it. The plain- 
text formatting technique aids in this. 

♦ It describes what documents mean. HTML isn't really designed to indi- 
cate how a page or its elements look. HTML is about describing the 
meaning of various elements (more on that very soon). This has some 
distinct advantages when you figure out how to use HTML properly. 

♦ It doesn 't describe how documents look. This one seems strange. Of 
course, when you look at Figure 1-1, you can see that the appearance of 
the text on the Web has changed from the way that text looked in your 
text editor. Formatting a document in HTML does cause the document's 
appearance to change. That's not the point of HTML, though. You discover 
(in Books II and HI) how to use another powerful technology — CSS — to 
change the appearance of a page after you define its meaning. This separa- 
tion of meaning from layout is one of the best features of HTML. 

♦ It's easy to write. Sure, HTML gets a little more complicated than this 
first example, but you can easily figure out how to write HTML by hand 
without any specialized editors. You only have to know a handful of ele- 
ments, and they're pretty straightforward. 

♦ It's free. HTML doesn't cost anything to use, primarily because it isn't 
owned by anyone. No corporation has control of it (although a couple 
have tried), and nobody has a patent on it. The fact that this technology 
is freely available to anyone is a huge advantage. 



Meeting \lour NevO friends, the lags 

The key to writing HTML code is the special text inside angle braces (<>). 
These special elements are tags. They aren't meant to be displayed on the 
Web page but offer instructions to the Web browser about the meaning of 
the text. The tags are meant to be embedded into each other to indicate the 
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organization of the page. This basic page introduces you to all the major tags Book I 
you'll encounter. (There are more, but they can wait for a chapter or two.) Chapter 1 

has a beginning and an end tag. The end tag is just like the begin- 
ept it has a forward slash (/). For example the entire page begins 
with an <html> tag and ends with </html>. Read the </html> as "end 
html." The <htmlx/html> combination indicates that everything in the 
page is defined as HTML code: 5" ^ 

♦ <htmlx/html>: The <html> tag is the foundation of the entire Web w r " 
page. It's the tag that begins the page. Likewise, </html> ends the page. 

Some books teach you to write your HTML tags all in uppercase letters. 
This was once a standard, but it is no longer recommended. When you 
move to XHTML code (which is a slightly stricter form of HTML) in 
Chapter 2 of this minibook, you'll see that XHTML requires all tags to be 
entirely lowercase. I'll begin with the standard you use for the rest of 
this book. 

♦ <headx/head>: These tags define a special part of the Web page 
called the head (or sometimes header). This part of the Web page 
reminds me of the engine compartment of a car. This is where you put 
some really great stuff later, but it's not where the main document lives. 
For now, the only thing you'll put in the header is the document's title. 
Later, you'll add styling information and programming code to make 
your pages sing and dance. 

♦ < ! - - -->: This tag indicates a comment, which is ignored by the 
browser. However, a comment is used to describe what's going on in a 
particular part of the code. All the examples for this book include a com- 
ment containing the code's filename. If you want to find out more about 
any of the code listings in the book, you can just find the appropriate file 
on the CD-ROM or Web site that accompanies the book. 

♦ <titlex/title>: This tag is used to determine the page's title. The 
title usually contains ordinary text. Whatever you define as the title will 
appear in some special ways. Many browsers put the title text in the 
browser's title bar. Search engines often use the title to describe the page. 

It's not quite accurate to say that the title text always shows up in the 
title bar because a Web page is designed to work on lots of different 
browsers. Sure, the title does show up on most major browsers that way, 
but what about cell phones and Personal Digital Assistants? HTML never 
legislates what will happen; it only suggests. This may be hard to get 
used to, but it's a reality. You trade absolute control for widespread 
capability, which is a good deal. 

♦ <bodyx/body>: The page's main content is contained within these 
tags. Most of the HTML code and the stuff the user sees is in the body 
area. If the header area is the engine compartment, the body is where 
the passengers go. 
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4- <hlx/hl>: HI stands for heading level one. Any text contained within 
this markup is treated as a prominent headline. By default, most browsers 
d special formatting to anything defined as HI, but there's no guaran- 
le. An HI heading doesn't really specify any particular font or formatting, 
just the meaning of the text as a level one heading. When you find out how 
to use CSS in Book II, you'll discover that you can make your headline look 
however you want. In this first minibook, keep all the default layouts for 
now and make sure you understand that HTML is about semantic mean- 
ing, not about layout or design. There are other kinds of headings too, of 
course, <hl> through <h6>. <h2> indicates a heading slightly less impor- 
tant than <hl>, <h3> is less important than <h2>, and so on. 

Beginners are sometimes tempted to make their first headline an <hl> 
tag and then use an <h2> for the second and <h3> for the third. That's 
not how it works. Newspapers and books use different kinds of head- 
lines to point out the relative importance of various elements on the 
page, often varying the point size of the text. You can read more about 
that in Book II. 

♦ <px/p>: In HTML, p stands for the paragraph tag. In your Web pages, 
you should enclose each standard paragraph in a <p></p> pair. You 
might notice that HTML doesn't preserve the carriage returns or white 
space in your HTML document. That is, if you press Enter in your code 
to move text to a new line, that new line isn't necessarily preserved in 
the final Web page. 

The <p>< /p> structure is one easy way to manage spacing before and 
after each paragraph in your document. 



A few notes about the basic page 



Be proud of this first page. It may be simple, but 
it's the foundation of greater things to come. 
Before moving on, take a moment to ponder 
some important HTML/XHTML principles 
shown in this humble page you've created: 

All tags are in lowercase. Although HTML 
does allow uppercase tags, the XHTML 
variation you'll be using throughout most of 
this book requires only lowercase tags. 

f Tag pairs are containers, with a beginning 
and an end. Tags contain other tags or text. 



V Some elements can be repeated. There's 

only one <html>, <title>, and 
<body> tag per page, but a lot of the other 
elements (<hl> and <p>) can be repeated 
as many times as you like. 

V Carriage returns are ignored. In the 

Notepad document, there are a number of 
carriage returns. The formatting of the orig- 
inal document has no effect on the HTML 
output. The markup tags indicate how the 
output looks. 
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^j»NG/ Some older books recommend using <p> without a < /p> to add space to Book I 

your documents, similar to pressing the Enter key. This way of thinking Chapter 1 
cause you problems later because it doesn't truthfully reflect the 
iWeb browsers work. Don't think of <p> as the carriage return. 
Instead, think of <p> and </p> as defining a paragraph. The paragraph 
model is more powerful because soon enough, you'll figure out how to § 
take any properly defined paragraph and give it yellow letters on a green £ 
background with daisies (or whatever else you want). If things are 
marked properly, they'll be much easier to manipulate later. 
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Setting Up \lour System 

You don't need much to make Web pages. Your plain text editor and a Web 
browser are about all you need. Still, there are some things you can do to 
make your life easier as a Web developer. 



Displaying fite extensions 

The method discussed in this section is mainly for Windows users, but it's a 
big one. Windows uses the extension (the part of the filename after the period) 
to determine what type of file you're dealing with. This is very important in 
Web development. The files you create are simple text files, but if you store 
them with the ordinary . txt extension, your browser can't read them prop- 
erly. What's worse, the default setting of Windows hides these extensions from 
you, so you have only the icons to tell you what type of file you're dealing 
with. This can cause all kinds of problems. I recommend you have Windows 
explicitly describe your file extensions. Here's how to set that up: 

/. Open the file manager (My Computer in XP or Computer in Vista.) 

Use the My Computer window to open a directory on your hard drive. It 
doesn't matter which directory you're looking at. You just need the tool 
open. 

2. Choose ToolsOFolder Options. 

The Folder Options dialog box appears. 

3. Select the View tab. 

You see the Folder Options dialog box. 

4. Don't hide extensions. 

By default, Windows likes to hide the extensions for known file types. 
However, you're a programmer now, so you deserve to be shown these 
things. Uncheck the Hide Extensions for Known File Types box, as 
shown in Figure 1-2. 
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Figure 1-2: 

Don't hide 
file 

extensions 
(deselect 
that last 
check box). 



File Types Offline ri.es 



You can apply the view (such as Details or Tiles] that 
you are using for this folder to all folders 



[ .Apply to All Folders | [ Reset Ail Folgers 



Advanced settings: 



if") Files and Folders 

0 Automatically search for network folders and printers 
0 Ds^ay'esie -":--=::'- - ; : :e : 
0 Display simple folder view in Explorer s Folders list 
0 Display the contents of system folders 
0 Display the full path m the address bar 
□ Display the full path m the title bar 
Pi Do not cache thumbnails 
£3 Hidden files and folders 

O Do not show hidden files and folders 
© Show hidden files and folders 
Q H'de extensions for known file types Q 



Restore Defaults 



| Cancel 



5. Show the path and hidden folders. 

I like to be shown my hidden files and folders (after all, they're mine, right?) 
and I like to have the full path listed. Click the appropriate check boxes to 
enable these features. You'll often find them to be helpful. 

6. Apply these change to all the folders on your computer by clicking 
the Apply to All Folders button. 

This causes the file extensions to appear everywhere, including the 
Desktop. 



Setting up your software 

You'll write a lot of Web pages, so it makes sense to set up your system to 
make that process as easy as possible. I talk a lot more about some software 
you should use in Chapter 3 of this minibook, but for now, here's a couple of 
easy suggestions: 



♦ Put a Notepad icon on your Desktop. You'll edit a lot of text files, so it's 
helpful to have an icon for Notepad (or whatever other text editor you use) 
available directly on the Desktop. That way, you can quickly edit any 
Web page by dragging it to the Desktop. When you use more sophisticated 
editors than Notepad, you'll want links to them, too. 

♦ Get another Web browser. You may just love your Web browser, and 
that's fine, but you can't assume that everybody likes the same browser 
you do. You need to know how other browsers will interpret your code. 
Firefox is an incredibly powerful browser, and it's completely free. If you 
don't have them already, I suggest having links to at least two browsers 
directly on your Desktop. 
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Understanding the magic 



ToST"6f>H£ ^rtlBMns people have with the 
Web come from misunderstandings about how 
this medium really works. Most people are 
comfortable with word processors, and we 
know how to make a document look how we 
want. Modern applications use WYSIWYG 
technology, promising that what you see is 
what you get. That's a reasonable promise 
when it comes to print documents, but it 
doesn't work that way on the Web. 

How a Web page looks depends on a lot of 
things that you don't control. The user may read 
your pages on a smaller or larger screen than 
you. She may use a totally different operating 
system than you. She may have a dialup con- 
nection or may turn off the graphics for speed. 
She may be blind and use screen-readertech- 
nology to navigate Web pages. She may be 
reading your page on a PDA or a cell phone. 



You can't make a document that looks the same 
in all these situations. 

A good compromise is to make a document that 
clearly indicates how the information fits 
together and makes suggestions about the 
visual design. The user and her browser can 
determine how much of those suggestions to 
use. 

You get control of the visual design but never 
complete control, which is okay because you're 
trading total control for accessibility. People 
with devices you've never heard of can visit 
your page. 

Practice a few times until you can easily build a 
page without looking anything up. Soon enough, 
you're ready forthe next step — building pages 
like the pros. 
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Chapter 2: It's All about Validation 

DropBooks — 

In This Chapter 

Introducing the concept of valid pages 

Using a doctype 
V Introducing XHTML 1.0 Strict 

Setting the character set 

Meeting the W3C Validator 

Fixing things when they go wrong 
w Using HTML Tidy to automatically clean your pages 



■ My eb development is currently undergoing an important revolution. As 
wW the Web matures and becomes more important, it becomes more 
important to ensure that Web pages perform properly. There is a new call 
for Web developers to follow voluntary standards of Web development. 



Somebody Stop the HTML Madness! 

In the bad old days, the Web was a pretty informal affair. People wrote HTML 
pages however they wanted. Although this was easy, it led to a lot of problems: 

♦ Browser manufacturers added features that didn't work on all 
browsers. People wanted prettier Web pages with colors, fonts, and 
doodads, but there wasn't a standard way to do these things. Every 
browser had a different set of tags that supported enhanced features. As 
a developer, you had no real idea if your Web page would work on all 
the browsers out there. If you wanted to use some neat feature, you had 
to ensure your users had the right browser. 

♦ The distinction between meaning and layout was blurred. People 
expected to have some kind of design control of their Web pages, so all 
kinds of new tags popped up that blurred the distinction between 
describing and decorating a page. 

♦ A table-based layout was used as a hack. HTML didn't have a good way 
to handle layout, so clever Web developers started using tables as a layout 
mechanism. This worked, after a fashion, but it wasn't easy or elegant. 



Somebody Stop the HTML Madness! 



♦ People started using tools to write pages. Web pages soon became so 
ugly that people began to believe that they couldn't do HTML by hand 

ymore and that some kind of editor was necessary to handle all that 
mplexity for them. The trouble is that although these editing pro- 
grams introduced new features that made things easier upfront, these 
tools also made code almost impossible to change without the original 
editor. Web developers began thinking they couldn't design Web pages 
without a tool from a major corporation. 

♦ The nature of the Web was changing. At the same time, these factors 
were making ordinary Web development more challenging. Innovators 
were recognizing that the Web wasn't really about documents but was 
about applications that can dynamically create documents. Many of the 
most interesting Web pages you visit aren't Web pages at all, but pro- 
grams that produce Web pages dynamically every time you visit. This 
meant that developers had to make Web pages readable by programs, as 
well as humans. 

In short, the world of HTML was a real mess. 

XHTML to the rescue 

In 2000, the World Wide Web Consortium (usually abbreviated as W3C) got 
together and proposed some fixes for HTML. The basic plan was to create a 
new form of HTML that complied with a stricter form of markup, or 
extensible Markup Language (XML ). The details are long and boring, but 
essentially, they came up with some agreements about how Web pages are 
standardized. Here are some of those standards: 

♦ All tags have endings. Every tag comes with a beginning and an end tag. 
(Well, there are a few exceptions, but they come with their own ending 
built-in. I'll explain when you encounter the first such tag in Chapter 6 of 
this minibook.) This was a new development because end tags were con- 
sidered optional in old-school HTML, and many tags didn't even have 
end tags. 

♦ Tags can't be overlapped. In HTML, sometimes people had the tendency 
to be sloppy and overlap tags, like this: <a><b>my stuf f </a></b>. 
That's not allowed in XHTML, which is a good thing because it confuses 
the browser. If a tag is opened inside some container tag, the tag must 
be closed before that container is closed. 

♦ Everything's lowercase. Some people wrote HTML in uppercase, some 
in lowercase, and some just did what they felt like. It was inconsistent 
and made it harder to write browsers that could read all the variations. 

♦ Attributes must be in quotes. If you've already done some HTML, you 
know that quotes used to be optional — not anymore. 
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♦ Layout must be separate from markup. Old-school HTML had a bunch Book I 

of tags (like <f ont> and <center>) that were more about formatting Chapter 2 

markup. These were useful, but they didn't go far enough. XHTML 
ast the Strict version covered here) eliminates all these tags. Don't 
worry, though; CSS gives you all the features of these tags and a lot more. ^ 



This sounds like more rules than a strict librarian. Really they aren't restrict- a> „ 

ing at all because most of the good HTML coders were already following | g" 

these guidelines or something similar. ** 



There's XHTML, and then there's good XHTML 

In old-style HTML, you never really knew how your pages would look on vari- 
ous browsers. In fact, you never really knew if your page was even written 
properly. Some mistakes would look fine on one browser but cause another 
browser to blow up. 

The whole idea of validation is to take away some of the uncertainty of 
HTML. It's like a spell checker for your code. My regular spell checker makes 
me feel a little stupid sometimes because 1 make mistakes. I like it, though, 
because I'm the only one who sees the errors. I can fix the spelling errors 
before I pass the document on to you, so I look smart. (Well, maybe.) 

It'd be cool if you could have a special kind of checker that does the same 
things for your Web pages. Instead of checking your spelling, it'd test your 
page for errors and let you know if you made any mistakes. It'd be even 
cooler if you could have some sort of certification that your page follows a 
standard of excellence. 



That's exactly how page validation works. You can designate that your page 
will follow a particular standard and use a software tool to ensure that your 
page meets that standard's specifications. The software tool is a Validator. I 
show you two different Validators in this chapter, in the section called 
"Validating Your Page." 

The browsers also promise to follow a particular standard. If your page vali- 
dates to a given standard, any browser that validates to that same standard 
can reproduce your document correctly, which is a really big deal. 



Building an XHTML Document 

You create an XHTML document the same way you build ordinary HTML. 
You can still use an ordinary text editor, but the code is slightly more 
involved. Take a look at the following code (template . html on the 
CD-ROM) to see a bare-bones XHTML document: 



Building an XHTML Document 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : / / www. w3 . org/TR/xhtmll/DTD/xhtmll-strict . dtd"> 
xmlns= "http : / / www. w3 . org/ 199 9 / xhtml " > 

> 

http-eguiv= "Content-Type" content= " text /html ; 
charset=utf-8 " /> 
<title></title> 
</head> 
<body> 
<hlx/hl> 
<P> 
</p> 

</body> 
</html> 

At first, this new document looks a lot more complicated than the HTML you 
see in Chapter 1 of this minibook, but it isn't as bad as it seems. 

bon't memorize all this! 

Before you freak out, don't feel you have to memorize this nonsense. Even 
people who write books about Web development (um, like me) don't have 
this stuff memorized because it's too awkward and too likely to change. 

Keep a copy of template . html on your local drive (I keep a copy on my 
Desktop) and begin all your new pages with this template. When you start to 
use a more complex editor (see Chapter 3 of this minibook), you can often cus- 
tomize the editor so that it automatically starts with the framework you want. 

You don't have to have all this stuff down cold, but you should understand 
the basics of what's going on, so the following is a quick tour. 

The D0CT1/PE taq 

The scariest looking new XHTML feature is the < ! doctype> tag. This mon- 
ster is ugly, no doubt about it, but it does serve a purpose. Officially, it's a 
document type definition. Your doctype declares to the world what particular 
flavor of HTML or XHTML you're using. When you begin your page with the 
doctype I suggest here, you're telling the browser: "Hey, browser, my page 
follows the XHTML Strict Guidelines, and if you aren't sure what that is, go to 
this Web site to get it." 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : / /www. w3 . org/TR/xhtmll /DTD/xhtml 1 -strict . dtd"> 
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Many different doctypes are available, but it's really a lot simpler than it Book I 

seems. In this book, I show you XHTML 1.0 Strict, which is the only doctype Chapter 2 
today. The other variations you might find on the Web (HTML 4.0, 
and Transitional doctypes) are really designed for backwards 

compatibility. If you're going to go the standards-compliant route, you might < 

as well go whole hog. = > 

nJ = 
S n> 

It's true that XHTML 1 . 1 and XHTML 2.0 are on the horizon, but the major o" g" 

psychological barrier is moving from HTML to any form of XHTML Strict. ** 
After you make the XHTML Strict leap, you'll find it pretty easy to move on 
to the other forms of XHTML when they become viable. 



The xmtns attribute 

The html tag looks a little different than the one in Chapter 1 of this mini- 
book. It has the term xmlns after it, which stands for XML NameSpace. All 
this acronym does is help clarify the definitions of the tags in your document: 



<html xmlns = "http : / /www. w3 . org/ 19 9 9 /xhtml " > 



Truthfully, most Web developers don't use the xmlns attribute yet. If you 
leave it out, most browsers work just fine. I include it because the W3C's 
newest Validator (which was being tested when this book went to press) 
complains if you don't have it in there. By the time you read this book, that 
Validator might become the main tool for validation, and I don't want your 
pages to crash when the xmlns attribute becomes a requirement (which looks 
likely). 



The meta taq 

The last new and mysterious tag is the funky meta tag. meta tags have been 
a part of HTML for a long time. They allow you to describe various charac- 
teristics of a Web page: 



<meta http-equiv= " Content-Type" content= " text /html ; 
charset=utf -8 " /> 



The particular form of the meta tag you see here defines the character set to 
use. The utf character set handles a number of Western languages well. 

The real truth is, if you start with this framework, you'll have everything you 
need to make official XHTML pages that validate properly. 



\lou Validate me 

All this doctype and xmlns nonsense is worth it because of a nifty program — 
the Validator. The most important is the one at W3C: http : / /validator . 
w3 . org, as shown in Figure 2-1. 
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Figure 2-1: 

The W3C 
Validator 
main page 
isn't 

exciting, but 
it sure is 
useful. 



C Markup Validation Service - Mozilla Firefox 
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Docs Help & FAQ 



Feedback Donate 



This is the W3C Markup Validation Service, a free service that checks 
Web documents in formats like HTML and XHTML for conformance to 
W3C Recommendations and other standards 



by URL 
by File Upload 
by direct Input 



if you wish to validate specific content such as RSS/Atom feeds or CSS 
stylesheets or to find broken links, there are other validators and tools available 



Try out the future Test the Beta version of the new validator now! 



Validate Your Markup 



Enter the URL of the page you want to check Advanced options are available from 

the Extended Interface 



O O Nov. : Sunny, B 1° F 



| Wed: 86° F 



The Validator is actually the front end of a piece of software that checks 
pages for validity. It looks at your Web page's doctype and sees if the page 
conforms to the rules of that doctype. If not, it tells you what might have 
gone wrong. 

You can submit code to the Validator in three different ways: 

4- Validate by URL. This option is used when a page is actually hosted on a 
Web server. Files stored on local computers can't be checked with this 
technique. Book VIII describes all you need to know about working with 
Web servers, including how to create your own. 

♦ Validate by File Upload. This technique works fine with files you 
haven't yet posted to a Web server. It works great for pages you write on 
your computer but you haven't made visible to the world. This is the 
most common type of validation for beginners. 

♦ Validate by Direct Input. The Validator page has a text box you can 
simply paste your code into. It works, but I usually prefer to use the 
other methods because they're easier. 

Validation might sound like a big hassle, but it's really a wonderful tool because 
sloppy HTML code can cause lots of problems. Worse, you might think every- 
thing's okay until somebody else looks at your page, and suddenly, the page 
doesn't display correctly. 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http: / /www. w3 .org/TR/xhtmll /DTD/xhtmll -strict .dtd"> 
<html xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv=" Content-Type" content^" text /html; charset=iso-8859-l " /> 
<!-- oxWheelsl.html --> 



Book I 
Chapter 2 



n all this, I created a Web page the way Aesop might have done in 
reece. Okay, maybe Aesop didn't write his famous fables as Web 
pages, but if he had, they might have looked like the following code listing: < «■ 



— > 

a. — 

2. si 
2'S" 



<!-- note this page has deliberate errors! Please see the text 
and oxWheelsCorrect.html for a corrected version. 



</head> 
<body> 

<title>The Oxen and the Wheels</title> 
<hl>The Oxen and the Wheels 
<h2x/hl>From Aesop's Fables</h2> 



<p> 

A pair of Oxen were drawing a heavily loaded wagon along a 
miry country road. They had to use all their strength to pull 
the wagon, but they did not complain. 

<p> 



<p> 

The Wheels of the wagon were of a different sort. Though the 
task they had to do was very light compared with that of the 
Oxen, they creaked and groaned at every turn. The poor Oxen, 
pulling with all their might to draw the wagon through the 
deep mud, had their ears filled with the loud complaining of 
the Wheels. And this, you may well know, made their work so 
much the harder to endure. 

</p> 



"Silence!" the Oxen cried at last, out of patience. "What have 
you Wheels to complain about so loudly? We are drawing all the 
weight, not you, and we are keeping still about it besides." 

</p> 



<h2> 

They complain most who suffer least. 
</h2> 



</body> 
</html> 



It looks okay, but there are actually a number of problems. Aesop may have 
been a great storyteller, but from this example, it appears he was a sloppy 
coder. The mistakes can be pretty hard to see, but trust me, they're there. 
The question is how do you find the problems before your users do? 
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You might think that the problems would be evident if you viewed the page 
in a Web browser. The Firefox and Internet Explorer Web browsers seem to 
,e the page decently, even if they don't display it in an identical way. 
2-2 shows oxWheelsl . html in Firefox, and Figure 2-3 shows it in 
Internet Explorer. 



Figure 2-2: 

oxWheelsl. 
html in 
Firefox. 
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The Oxen and the Wheels 

From Aesop's Fables 

A pair of Oxen were drawing a heavily loaded w agon along a iniry country road. They had to use all tlieir strength to pull the 
wagon, but they did not complain 

The Wheels of the wagon were of a different sort Though the task they had to do was very light compared with that of the Oxen, 
the - ." :reaked and groaned at ever." turn. The poor Oxen, pulling with all tlieir might to draw the wagon tlirough the deep mucL 
had tlieir ears filled with the loud complaining of the \\ heels. And this, you mav well know, made their work so much the harder 
to endure. 

"Silence!" the Oxen cried at last, out of patience "What have you Wheels to complain about so loudly"' We are drawing all the 
weight, not you, and we are keeping still about it besides." 



They complain most who suffer least. 
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Figure 2-3: 

oxWheelsl. 
html in 
Internet 
Explorer. 
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The Oxen and the Wheels 
From Aesop's Fables 

A pair of Oxen were drawing a heavily loaded wagon along a miry country road. They had to use all tlieir strength to pull the 
wagon, but they did not complain. 

The Wheels of the wagon were of a different sort. Though the task they had to do was very light compared with that of the 
Oxen, they creaked and groaned at ev ery turn The poor Oxen, pulling with all their might to draw the wagon through the 
deep mud, had tlieir ears filled with the loud complaining of the Wheels And this, you may well know, made their work so 
much the harder to endure. 

"Silence!" the Oxen cried at last, out of patience. "What have you Wheels to complain about so lowly? We are drawing all 
the weight, not you, and we are keeping still about it besides " 

They complain most who suffer least. 
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Firefox appears to handle the page pretty well, but From Aesop's Fables Book I 
is supposed to be a headline level two, or H2, and it appears as plain text. Chapter 2 

n that, there's very little indication that something is wrong. 



in 



Microsoft Internet Explorer also tries to display the page, and it also does a 

decent job. Notice now that From Aesop ' s Fables appears to be a level ="■ > 

one header, or HI. That's odd. Still, the page looks pretty good in both the „ 

major browsers, so you might assume everything's just fine. That gets you into | 3 

trouble. ** 



If it looks fine, who cares if it's exactly right? You might wonder why we care 
if there are mistakes in the underlying code, as long as everything works 
okay After all, who's going to look at the code if the page displays properly? 

The problem is, you don't know if it'll display properly, and mistakes in your 
code will eventually come back to haunt you. If possible, you want to know 
immediately what parts of your code are problematic so you can fix them 
and not worry. 



Aesop Visits W3C 

To find out what's going on with this page, pay a visit to the W3C Validator at 
http : / /validator . w3 . org. Figure 2-4 shows me visiting this site and 
uploading a copy of oxwheelsl . html to it. 

Hold your breath and hit the Check button. You might be surprised at the 
results shown in Figure 2-5. 



Figure 2-4: 

I'm check- 
ing the 
oxWheels 
page to look 
for any 
problems. 



£ The W3C Markup Validation Service - Mozilla Firefox 
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the Extended Interface. 



Validate by File Upload 



Local File C:\Program Files\xampp\htdocs\xt | [Browse...! I | Check | 

Select the file you want to upload and check. Advanced options are available from 
the Extended File Upload Interface. 

Note file upload may not work with Internet Explorer on some versions of Windows 
XP Service Pack 2 see our information page on the W3C QA Website 



Validate by Direct Input 



Input the markup you would like to validate in the text area below: 



O 0 Now; Sumy, 81 C F 



| Wed: 86' F 
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Figure 2-5: 

Twelve 
errors? That 
can't be 
right! 



Validator - Mozilla Firefox 
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Markup Validation Service 



Result: 
File: 
Encoding: 
Doctype: 
Root Namespace: 



Failed validation. 12 errors 
oxWheelsl html 
iso-8859-1 
XHTML 1.0 Strict 

http://www.w3 org/1 999/xhtml 



Note The Validator XML support has some limitations 



This page is not Valid XHTML 1.0 Strict! 



Below are the results of checking this document for XML well-formedness and validity 
1 Line 13 column 6 end tag for "head" which is not finished 

</head 

Most likely You nested tags and closed them in the wrong order For example <p><em> </p> 
is nol acceptabl e as < emjL _must be closed b efore <p> Accept able ne sting, is 



O 9 f * om ' ^""V' B1 ° F 



The Validator is a picky beast, and it doesn't seem to like this page at all. The 
Validator does return some useful information and gives enough hints that 
you can decode things soon enough. 



Examining the oi/ert/ieut 

Before you take a look at the specific complaints, take a quick look at the Web 
page the Validator sends you. The Web page is chock full of handy information. 
The top of the page tells you a lot of useful things: 

♦ Result: This is really the important thing. You'll know the number of 
errors remaining by looking at this line. Don't panic, though. There are 
probably fewer errors in the document than the number you see here. 

♦ File: This is the name of the file you're currently working on. 

♦ Encoding: The encoding is the text encoding you've set. If you didn't 
explicitly set text encoding, you may see a warning here. 

♦ Doctype: This is the doctype extracted from your document. It indicates 
the rules that the Validator is using to check your page. This should 
usually say xhtml 1.0 Strict. 

♦ Root Namespace: If you use the template I give you, you always see the 
same namespace, and you don't have any surprises. 

♦ The dreaded red banner: Experienced Web developers don't even have 
to read the results page to know if there is a problem. If everything goes 
well, there's a green congratulatory banner. If there are problems, the 
banner is red. It doesn't look good, Aesop. 
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Don't panic because you have too many errors. The mistakes often overlap, 
so_one problem in your code often causes more than one error to pop up. 

the time, you have far fewer errors than the page says, and a lot of 
\s are repeated, so after you find the error once, you'll know how to 
fix it throughout the page. 



so one pr< 



Validating the page 

The Validator doesn't always tell you everything you need to know, but it 
does give you some pretty good clues. Page validation is tedious but not as 
difficult as it might seem at first. Here are some strategies for working 
through page validation: 



Book I 
Chapter 2 



♦ Focus only on the first error. Sure, 100 errors might be on the page, but 
solve them one at a time. The only error that matters is the first one on the 
list. Don't worry at all about other errors until you've solved the first one. 

♦ Note where the first error is. The most helpful information you get is 
the line and column information about where the Validator recognized the 
error. This isn't always where the error is, but it does give you some clues. 

♦ Look at the error message. It's usually good for a laugh. The error 
messages are sometimes helpful and sometimes downright mysterious. 

♦ Look at the verbose text. Unlike most programming debuggers, the W3C 
Validator tries to explain what went wrong in something like English. It 
still doesn't always make sense, but sometimes the text gives you a hint. 

♦ Scan the next couple errors. Sometimes, one mistake shows up as more 
than one error. Look over the next couple errors, as well, to see if they 
provide any more insight; sometimes, they do. 

♦ Revalidate. Check the page again after you save it. If the first error is 
now at a later line number than the previous one, you've succeeded. 

♦ Don't worry if the number of errors goes up. The number of perceived 
errors will sometimes go up rather than down after you've successfully 
fixed a problem. This is okay. Sometimes, fixing one error causes others 
to appear. More often, fixing one error clears up many more. Just concen- 
trate on clearing errors from the beginning to the end of the document. 

♦ Lather, rinse, and repeat. Look at the new top error and get it straight- 
ened out. Keep going until you get the coveted Green Banner of 
Validation. (If I ever write an XHTML adventure game, that will be one of 
the most powerful talismans.) 



Examining the first error 

Look again at the results for the oxwheelsl . html page. The first error mes- 
sage looks like Figure 2-6. 
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Figure 2-6: 

It doesn't 
like the end 
of the head? 



ixWheelsl .html - W3C Markup Validator - Moztlla Firefox 

Fie Edit Vieiv Hstory Bootonarte loota HHd 
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This page is not Valid XHTML 1.0 Strict! 



Below are the results of checking this document for XML well-formedness and validity 
1 I3?ffl Line 13 column 6 end tag for "head" which is not finished 

</head > 

Most likely You nested tags and closed them in the wrong order For example -:p><am> </p> 
is not acceptable, as <em> must be closed before <p> Acceptable nesting is 

<pxem>.. </emx/p> 

Another possibility is that you used an element which requires a child element that you did not 
include Hence the parent element is not finished" not complete For instance <head> 
generally requires a <title> lists (ul ol dl) require list items (li or dt dd} and so on 



2 I3TS1 Line 15 column 6 document type does not allow element "title" here 

<tit\e > The Oxen and the Wheel s</titl.e> 

The element named above was found in a context where it is not allowed This could mean that 
you have incorrectly nested elements -■ such as a "style" element in the "body" section instead 
of inside "head" -- or two elements that overlap (which is not allowed) 

One common cause for this error is the use of XHTML syntax in HTML documents Due to 
HTULs rules of implicitly closed elements this error can create cascading effeas Fm Tstar:? 

' O 9 Now: Sunny, 81° F Tue; 35 : = 



Figure 2-6 shows the first two error messages. The first complains about 
where the </head> tag is. The second message complains about the 
<title> tag. Look at the source code, and you see that the relevant code 
looks like this: 

<head> 

<meta http-ecruiv="Content-Type" content^" text/html; charset=iso-8859-l " /> 
<!-- oxWheelsl.html --> 

<!-- note this page has deliberate errors! Please see the text 
and oxWheelsCorrect.html for a corrected version. 

--> 

</head> 
<body> 

<title>The Oxen and the Wheels</title> 
<hl>The Oxen and the Wheels 

Look carefully at the head and title tags, and review the notes in the error 
messages, and you'll probably see the problem. The <title> element is 
supposed to be in the heading, but I accidentally put it in the body! (Okay, it 
wasn't accidental; I made this mistake deliberately here to show you what 
happens. However, I have made this mistake for real in the past.) 



Fixing the title 

If the title tag is the problem, a quick change in the HTML should fix this prob- 
lem. oxWheels2 . html shows another form of the page with my proposed fix: 
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<head> 

<meta http-equiv="Content-Type" content^" text/html; charset=iso-8859-l " /> 



<title>The Oxen and the Wheels</title> 
</head> 

<body> 

Note that I'm only showing the parts of the page that I changed. The entire 
page is available on the CD-ROM. 

The fix for this problem is pretty easy: 

/. Move the title inside the head. 

I think the problem here is having the <title> element inside the body, 
rather than in the head where it belongs. If I move the title to the body 
the error should be eliminated. 

2. Change the comments to reflect the page's current status. 

It's important that the comments reflect what changes I make. 

3. Save the changes. 

Normally, you simply make a change to the same document, but I've 
elected to change the filename so you can see an archive of my changes 
as the page improves. This can actually be a good idea because you then 
have a complete history of your document's changes, and you can always 
revert to an older version if you accidentally make something worse. 

4. Note the current first error position. 

Before you submit the modified page to the Validator, make a mental 
note of the position of the current first error. Right now, the Validator's 
first complaint is on line 13, column 6. 1 want the first mistake to be 
somewhere later in the document. 

5. Revalidate by running the Validator again on the modified page. 

6. Review the results and do a happy dance. 

It's likely there are still errors, but that's not a failure! Figure 2-7 shows 
the result of my revalidation. The new first error is on line 16, and it 
appears to be totally different than the last error. I solved it! 




loved the title tag inside the header --> 
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Figure 2-7: 

Document 
type does 
not allow 
element 
"h2" here. 
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Result: Failed validation. 10 errors 
File: oxWheels2.html 


Jump To: 

Results 








Encoding: iso-8859-1 
Doctype: XHTML 1.0 Strict 
Root Namespace: http://www.w3.org/1999/xhtml 










Note The Validator XML support has some limitations 








This page is not Valid XHTML 1.0 Strict! 








Below are the results of checking this document for XML well-formedness and validity 








1 I9H31 Line 16 column 3 document type does not allow element "h2" here; missing 
one of "object", "ins", "del", "map", "button" start-tag 








<h2 > </hl>From Aesop's Fables</h2> 
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Solving the next error 

One down, but there are more to go. The next error (shown in Figure 2-7) 
looks strange, but it's one you'll see a lot. 

The document type does not allow error is very common. What it 
usually means is you forgot to close something or you put something in the 
wrong place. The error message indicates a problem in line 16. The next error 
is line 16, too. See if you can find the problem here in the relevant code: 

<body> 

<hl>The Oxen and the Wheels 
<h2x/hl>From Aesop 1 s Fables</h2> 

After you know where to look, the problem becomes a bit easier to spot. I 
got sloppy and started the <h2> tag before I finished the <hl>. One tag can 
be completely embedded inside another (at least, in many cases), but you 
can't have tag definitions overlap like I've done here. The <hl> has to close 
before I can start the <h2> tag. 

This explains why the two main browsers displayed From Aesop's Fables 
differently. It isn't clear whether this code should be displayed in HI or H2 
format, or perhaps with no special formatting at all. It's much better to know 
the problem and fix it than to remain ignorant until something goes wrong. 
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The third version — oxWheels3 . html — fixes this part of the program: 




ieels3 .html --> 
out the hi and h2 tags at the top --> 



<title>The Oxen and the Wheels</title> 
</head> 

<body> 

<hl>The Oxen and the Wheels</hl> 
<h2>From Aesop's Fables</h2> 



Book I 
Chapter 2 



2 5 



Checking the headline repair 

The heading tags look a lot better, and a quick check of the Validator con- 
firms this fact, as shown in Figure 2-8, which now shows only six errors. 

Here's another form of that document type does not allow error. This 
one seems strange because surely <p> tags are allowed in the body! The 
secret to this particular problem is to look carefully at the error message. 
This document has a lot of <p> tags in it. Which one is it complaining about? 



Figure 2-8: 

Document 
type doesn't 
allow "p" 
here. That's 
odd. 



A Result for oxWheels3.html - W3C Workup Validator - Mozilla Firefox 
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Result: Failed validation 6 
File: oxWheels3.html 


errors 


Jump To: 

Results 








Encoding: iso-8859-1 
Doctype: XHTML 1.0 Strict 
Root Namespace: http://www.w3. org/1 999/xhtml 

Note The Validator XML support has some limitations. 








This page is not Valid XHTML 1.0 Strict! 








Below are the results of checking this document for XML well-formedness and validity 

1 I3BTI Line 22 column 2 document type does not allow element "p" here; missing one 
of "object", "ins", "del", "map", "button" start-tag 

<P>. 




- 




0 «> 


Nov.: Sumy, 81" F .j Tue:85'F Wed: 86" 


- 2> 





The complaint is about the <p> tag on line 22. Unfortunately, Notepad doesn't 
have an easy way to know which line you're on, so you just have to count 
until I show you some better options in Chapter 3 of this minibook. To make 
things easier, I've reproduced the key part of the code here and highlighted 
line 22. Try to find the problem before I explain it to you: 



36 Validating l/our Page 



<hl>The Oxen and the Wheels</hl> 
<h2>From Aesop's Fables</h2> 
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>air of Oxen were drawing a heavily loaded wagon along a 
ry country road. They had to use all their strength to pull 
the wagon, but they did not complain. 



The Wheels of the wagon were of a different sort. Though the 
task they had to do was very light compared with that of the 
Oxen, they creaked and groaned at every turn. The poor Oxen, 
pulling with all their might to draw the wagon through the 
deep mud, had their ears filled with the loud complaining of 
the Wheels. And this, you may well know, made their work so 
much the harder to endure . 

</p> 



Aha! Line 22 is supposed to be the end of the paragraph, but I somehow forgot 
the slash character, so the Validator thinks I'm beginning a new paragraph 
inside the previous one, which isn't allowed. This causes a bunch of other 
errors, too. Because the Validator can't see the end of this paragraph, it thinks 
that all the rest of the code is inside this first paragraph. Try changing the <p> 
of line 22 into a </p> and see if it works better: 



<p> 

A pair of Oxen were drawing a heavily loaded wagon along a 
miry country road. They had to use all their strength to pull 
the wagon, but they did not complain. 

</p> 



Figure 2-9 shows the validation results for oxWheels4 . html. 



& Result for oxWheeM.html - W3C Markup Validator - Mozilla Firefox 



Figure 2-9: 

Hooray! We 
have a valid 
page! 
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Result: 
File: 
Encoding: 
Doctype: 
Root Namespace: 



oxWheels4 html 
iso-8859-1 
XHTML 1.0 Strict 
http://www.w3. org/1 999/xhtml 



Note: The Validator XML support has some limitations. 



This Page Is Valid XHTML 1.0 Strict 



Tip Of The Day: 



Managing URIs 



The uploaded document "oxWheels4.html" was checked and found to be valid XHTML 1 .0 
Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and 
that we successfully performed a formal validation using an SGML or XML Parser 
(depending on the markup language used). 
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Shouting off your mad skiiiz * 00kl 

gtimes, that green bar makes little tears of joy run down my cheeks, 
lations! It's only the second chapter in this minibook, and you're 
riting better Web pages than a lot of professionals. ; 



Seriously, a Web page that validates to XHTML Strict is a big deal, and you 
deserve to be proud of your efforts. The W3C is so proud of you that they 
offer you a little badge of honor you can put on your page. 

Figure 2-10 shows more of the page you get when your page finally validates 
correctly. You can see a little button and some crazy-looking HTML code. 
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3- Result for oxWheels4.html - W3C Markup Validator - Mozilla Firefox 
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This Page Is Valid XHTML 1.0 Strict! 



Tip Of The Day 



Managing URIs 



Figure 2-10: 

The Validator 
gives you a 
little virtual 
badge of 
honor to 
show how 
cool you 
are. 



The uploaded document "oxWheels4 html" was checked and found to be valid XHTML 1 0 
Strict. This means that the resource in question identified itself as "XHTML 1.0 Strict" and 
that we successfully performed a formal validation using an SGML or XML Parser 
(depending on the markup language used). 

W5C io"!^ 0 show your readers that youjiave taken the care to create an interoperable 

■ — ™ Web page, you may display this icon on any page that validates. Here is the 

HTML you could use to add this icon to your Web page: 

<p> 

<a h ref="http : //validator . w3 .org/c heck?uri=ref ere r "ximg 
s rc="http : //www .w3 . org/I cons /valid - xhtml 10" 
alt="Valid XHTML 1.9 Strict" height="31" width="88" /></< 



If you like, you can download a copy of this image (in PNG or GIF format) to keep in your local 
web directory, and change the HTML fragment above to reference your local image rather 
than the one on this server. 

A fi ill kct nf if nnc mrth linl/c >n ittnrnifn fnrmiH- -inH rplArr inlrn ow-iikMn 

© 0 Now! Sunny, 31=F Tue;35= = Wed: B 



If you want, you can copy and paste that code into your page. 
oxWheels5 .html has that special code added at the end of the body, 
shown in Figure 2-11. 

This little code snippet does a bunch of neat things, such as 

♦ Establishing your coding prowess: Any page that has this image on it 
has been tested and found compliant to XHTML Strict standards. When 
you see pages with this marker, you can be confident of the skill and pro- 
fessionalism of the author. 

♦ Placing a cool image on the page: You'll read how to add your own 
images in Chapter 6 of this minibook, but it's nice to see one already. 
This particular image is hosted at the W3C site. 
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♦ Letting users check the page for themselves: When the user clicks the 
image, they're taken directly to the W3C Validator to prove that the page 
in fact valid XHTML Strict. Unfortunately, this link works only on pages 
at are posted to a Web server, so it doesn't work right on a page just 
_-lting on your computer. Scope out Book VIII for suggestions on finding 
and using a server. 
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From Aesop's Fables 

A pair of Oxen were drawing a hea\ily loaded wagon along a miry country road They had to use aH their strength to pull the 
wagon, but they did net complain 

The \\ heels of the wagon were of a different sort. Though the task thev had to do was verv lurht compared with that of the Oxen, 
they creaked and groaned at every turn The poor Oxen, pulling with all their might to draw the wagon through the deep mud, 
had their ears filled with the loud complaining of the Wheels. .And this, you may well know, made their work so much the harder 
to endure 



Figure 2-11: 

Look, I have 
a medal 
from the 
W3C! 



"Silence!" the Oxen cried at last, out of patience "What have you heels to complain about so loudlv 1 We are drawing all the 
■■■ eight, not vou, and we are keeping still about it besides." 



They complain most who suffer least. 



O 0 No'iV! Sunny, 8 l c F 
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Special code 



Using. Tidy to repair pages 

The W3C Validator isn't the only game in town. Another great resource — 
HTML Tidy — can be used to automatically fix your pages. You can download 
Tidy or just use the online version at http : // infohound.net /tidy. 
Figure 2-12 illustrates the online version with oxwheelsl . html being loaded. 

Unlike W3C's Validator, Tidy attempts to actually fix your page. Figure 2-13 
demonstrates how it suggests how the oxwheels . html page should be fixed. 

Tidy examines the page for a number of common errors and does its best to 
fix the errors. However, the result is not quite perfect: 

♦ Tidy adds a new met a tag, indicating the page was created by Tidy. I 

always get nervous when a program I didn't write starts messing with 
my pages. 
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Tidy tends to choose a sloppier doctype. If you don't specify otherwise, 
Tidy checks against XHTML 1.0 Transitional, rather than Strict. This 
,er definition isn't as stringent. You can (and should) specify the 
it doctype manually in the submission form. 
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l HTML Tidy Online - Mozilla Firefox 



Figure 2-12: 

HTML Tidy 
is an 

alternative 
to the W3C 
Validator. 



Edit View History Bookmarks Tools Help 



f|J I l! http://jnfohound.net/tjdy/ 



This online version enables you use it without installing the client tool on your PC. More 
information about HTML Tidy is available from the original W3C cage , and you can download a 
iocal copy of it from the f -- - . -i: za^ . 
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Figure 2-13: 

Tidy fixes 
the page, 
but the fix is 
a little 
awkward. 



& HTML Tidy Results - Mozilla Firefox 
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validation really that big a deal? 



n TTeaf tne mgry e-mails coming in. "Andy, 
I've been writing Web pages since 1998, and I 
never used a Validator." Okay, it's true. A lot of 
people, even some professional Web develop- 
ers, work without validating their code. Some 
of my older Web pages don't validate at all. (You 
can run the W3C Validator on any page you 
want, not just one you wrote. This can be a 
source of great joy if you like feeling superior to 
sloppy coders.) When I became more proficient 
and more prolific in my Web development, I 
found that those little errors often caused a 
whole lot of grief down the road. I really believe 
you should validate every single page you 
write. Get into the habit now, and it'll pay huge 



dividends. When you're figuring out this stuff 
for the first time, do it right. 

If you already know some HTML, you're gonna 
hate the Validatorfor a while because it rejects 
coding habits thatyou might think are perfectly 
fine. It's a lot harder to unlearn things than it is 
to learn them in the first place, so I feel your 
pain. It's still worth it. 

After you establish the discipline of validating 
your pages, you'll find you've picked up good 
habits, and validation becomes a lot less 
painful. Experienced programmers actually like 
the validation process because it becomes 
much easier and prevents problems that could 
cause lots of grief later. 



♦ Tidy got confused by the title. Tidy correctly diagnosed the title in the 
wrong place, but it added a blank title, as well as the intended one. 

♦ Sometimes the indentation is off. I set Tidy to indent every element, so 
it is easy to see how things are matched up. If I don't set up the indenta- 
tion explicitly, I find Tidy code very difficult to read. 

4- The changes aren't permanent. Anything Tidy does is just a suggestion. 
If you want to keep the changes, you need to save the results in your editor. 

I sometimes use Tidy when I'm stumped because I find the error messages 
are easier to understand than the W3C Validator. However, I never trust it 
completely. There's really no substitute for good old detective skills and the 
official W3C Validator. 




If you find the W3C Validator and Tidy to be a little tedious to use, look over 
the HTML Validator extension described in Chapter 3 of this minibook. This 
handy tool adds both the W3C Validator and Tidy to Firefox and automati- 
cally checks every page you visit. It also has Tidy support, so it can even fix 
most of your errors. 
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■ >l/eb development is a big job. You don't go to a construction site with- 
▼ ▼ out a belt full of tools (and a cool hat), and the same thing is true 
with Web development (except you don't normally need a hard hat for Web 
development). An entire industry has evolved trying to sell tools that help 
make Web development easier. The funny thing is that the tools you need 
might not be the ones that people are trying to sell you. Some of the very best 
Web development tools are free, and some of the most expensive tools aren't 
really that helpful. 

This chapter tells you what you really need and how to set up your work- 
shop with a lot of great programs that really simplify Web development. 



What's Wrong With the Big Boys? 

A lot of Web development books are really books about how to use a partic- 
ular type of software. Microsoft's FrontPage/Express and Macromedia/ 
Adobe Dreamweaver are the two primary applications in this category. 
These tools are powerful and offer some seemingly great features: 

♦ WYSIWYG editing: What you see is what you get is an idea borrowed 
from word processors. You can create a Web page much like a word- 
processing document and use menus, as well as tools, to handle all the 
formatting. The theory is that you don't have to know any icky codes. 

♦ Templates: You can create a template that stays the same and build sev- 
eral pages from that template. If you need to change the template, 
everything else changes automatically. 

♦ Site management: The interaction between the various pages on your 
site can be maintained automatically. 



Alternatit/e Web Development Tools 
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These sound like pretty good features, and they are. These tools (and the 
newer replacements, like Microsoft's Expression suite) are very powerful, 

ey can be an important part of your Web development toolkit. But the 
owerful programs introduce problems, such as the following: 



Code maintenance: The commercial editors that concentrate on visual 
design tend to create pretty unmanageable code. If you find there's 
something you need to change by hand, it's pretty hard to fix the code. 

Vendor lock-in: These tools are written by corporations that want you 
to buy other tools from them. If you're using Dreamweaver, you'll find it 
easy to integrate with other Adobe applications (like ColdFusion), but 
it's not as simple to connect to non-Adobe technology. Likewise, Microsoft's 
offerings are designed to work best with other Microsoft technologies. 

Cost: The cost of these software packages keeps going up. Expression 
Web (Microsoft's replacement for FrontPage) costs about $300, and 
Dreamweaver weighs in at $400. Both companies encourage you to buy 
the software as part of a package, which can easily cost more than $500. 

Complex: They're complicated. You can take a full class or buy a huge 
book on how to use only one of these technologies. If it's that hard to 
figure out, is it really saving you any effort? 

Code: You still need to understand it. No matter how great your platform 
is, at some point, you have to dig into your code. After you plunk down 
all that money and spend all that time figuring out an application, you still 
have to understand how the underlying code works because things still go 
wrong. For example, if your page fails to work on Safari, you'll have to find 
out why and fix the problem yourself. 

Spotty standards compliance: The tools are getting better here, but if 
you want your pages to comply with the latest standards, you have to 
heavily edit them after the tool is finished. 

Display variations: WYSIWYG is a lie. This is really the big problem. 
WYSIWYG works for word processors because it's possible to make the 
screen look like the printed page. After a page is printed, it stays the 
same. You don't know what a Web page will look like because that 
depends on the browser. What if the user loads your page on a cell 
phone or handheld device? The editors tend to perpetuate the myth that 
you can treat a Web page like a printed document, when in truth, it's a 
very different kind of beast. 



Alternative Web beVeiopment Toots 

All you really need is a text editor and a Web browser. You probably already 
have a basic set of tools on your computer. If you read Chapters 1 and 2 of 
this minibook, you've already written a couple of Web pages. However, the 
very basic tools that come with every computer might not be enough for 
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serious work. Web development requires a specialized kind of text editor, 
and a number of tools have evolved that make that job easier. 



Inqs you need to hatfe on your computer 

Here's a few things you need that you might not already have on your computer: 



♦ Line numbers: Notepad doesn't have an easy way to figure out what line 
you're on. It's pretty tedious to count lines every time you want to find a 
problem noted by the Validator. 

♦ Help features: It'd be ideal if your editor could help with your code. 
There are tools that recognize HTML code, help with indentation, and 
warn you when something is wrong. 

♦ Macros: You'll type the same code many times. A program that can 
record and play keyboard macros can save a huge amount of time. 

♦ Testing and validation: It should be easy to test your code in one or 
more browsers, and there should be an easy way to check your code for 
standards. 

♦ Multiple browsers: As an Internet user, it's fine to have only one 
browser, but a Web developer needs to know how things look in a couple 
different environments. 

♦ Browser features: You can customize some browsers (especially 
Firefox) to help you a lot. With the right attachments, the browser can 
point out errors and help you see the structure of your page. 

♦ Free and open tools: The Web is exciting because it's free and open tech- 
nology. If you can find tools that follow the same philosophy all the better. 



Building a basic toolbox 

I've found uses for five main types of programs in Web development: 

♦ Enhanced text editors: These tools are text editors, but they're souped- 
up with all kinds of fancy features, like syntax checkers, code-coloring 
tools, macro tools, and multiple document interfaces. 

♦ Browsers and plugins: The browser you use can make a huge difference. 
You can also install free add-ons that can turn your browser into a pow- 
erful Web development tool. 

♦ Integrated Development Environments (IDE): Programmers generally 
use IDEs, which combine text editing, visual layout, code testing, and 
debugging tools. 

♦ Programming technologies: This book covers all pertinent info about 
incorporating other technologies, like Apache, PHP, and MySQL. I show 
you how to install everything you need for these technologies in Book 
VIII, Chapter 1. You don't need to worry about these things yet, but you 
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should develop habits that are compatible with these enhanced tech- 
nologies from the beginning. 



ultimedia tools: If you want various multimedia elements on your 
ge, you'll need tools to manage them, as well. These could involve 
graphics and audio editors, as well as full-blown multimedia technologies, 
like Flash. 



Picking a Text Editor 

As a programmer, you come to see your text editor as a faithful dog. You 
spend a lot of time with this tool, so use one that obeys you. 



A text editor should save plain text without any formatting at all. You don't 
want anything that saves colors, font choices, or other text formatting 
because these things don't automatically translate to HTML. 

Fortunately, you have a lot of choices, as the following sections reveal. 



-AVNG 




Some toots to use When you haVe nothing else 

A text editor may be a simple program, but that doesn't mean they're all the 
same. Some programs have a history of causing problems for beginners (and 
experienced developers, too). Because some really great free alternatives are 
coming up, there's usually no need to use some of these weaker choices. 

Just don't use it. Word is a word processor. Even though it can theoretically 
create Web pages, the HTML code it writes is absolutely horrific. As an 
example, I created a blank document, wrote "Hello World" in it, changed the 
font, and saved it as HTML. The resulting page was non-compliant code, was 
not quite HTML or XHTML, and was 114 lines long. Word is getting better, 
but it's just not a good Web development tool. In fact, don't use any word 
processor. They're just not designed for this kind of work. 



Windows Notepad 

It's everywhere, and it's free. That's the good news. However, Notepad 
doesn't have a lot of features you might need, like line numbers, multiple 
documents, or macros. Use it if you're on an unfamiliar machine but try 
something else if you can. Many people begin with Notepad, but it won't be 
long until you outgrow its limitations. 



Mac TextEdit 

Mac also has a simple text editor built in — TextEdit. It's pretty similar to 
Notepad, but it's closer to a word processor than a programmer's text editor. 
TextEdit saves files in a number of formats. If you want to use it to write Web 



Picking a Text Editor 



any 01 i & 

DropBoote 



pages, you must save your files in plain-text format, and you must not use Book I 

any of TextEdit's formatting features. It's probably best not to use TextEdit Chapter 3 
u really have to. 



A noteworthy editor: Notepad++ J 

A number of developers have come up with good text editors. Some of the g: 

best are free, such as Notepad++ by Don HO. It's designed for text editing, 5 

especially in programming language. Figure 3-1 shows Notepad++ with an 5 1 

HTML file loaded. 5T 



Notepad++ has a lot of interesting features. Here are a few highlights: 

♦ Syntax highlighting: Notepad++ can recognize key HTML terms and put 
different types of terms in different colors. For example, all HTML tags 
are rendered in blue, and text is in black. This makes it easy to tell if 
you've made certain kinds of mistakes, like forgetting to end a tag. Note 
that the colors aren't saved in the document. The coloring features are 
there to help you understand the code. 

♦ Multiple files: You'll often want to edit more than one document at a time. 
You can have several different documents in memory at the same time. 



Figure 3-1: 

Notepad++ 
has many of 
the features 
you need in 
a text editor. 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 

<html lang="EN" dir="ltr" :::iil:!:?="http : //www.w3 . org/1999/xhtml"> 

<head> 

<meta http-equiv="content-type" content="text/xml ; charset=utf-8" /> 

<title>Notepad++ Demo</title> 

</head> 
<body> 

<hl>Notepad++ Demo</hl> 

<p> 

This page is a demonstration of notepad++. This is a 
nice, solid editor with plenty of useful features for 
web development. It's free and powerful. 

</p> 

<p> 

Notepad++ colors the different syntax elements for you, 
so you can easily see if you're missing the end of a tag. 
It also has nice features for previewing your page in 
multiple browsers and support for the HTML Tidy program. 

</p> 
</body> 
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♦ Multi-language support: At the moment, your pages consist of nothing 
but XHTML. Soon enough, you'll use some other languages, like SQL, CSS, 

* f^id PHP. Notepad++ is smart enough to recognize these languages, too. 



♦^Macros: Whenever you find yourself doing something over and over, 
consider writing a keyboard macro. Notepad++ has a terrific macro fea- 
ture. Macros are really easy to record and playback a series of keystrokes. 
This feature can often save you a lot of work. 

♦ Page preview: When you write a page, test it. Notepad++ has shortcut 
keys built in to let you quickly view your page in Internet Explorer, or IE, 
(Ctrl+Alt+Shift+I) and Firefox (Ctrl+Alt+Shift+X). 

♦ TextFX: The open-source design of Notepad++ makes it easy to add fea- 
tures. The TextFX extension (built into Notepad++) allows you to do all 
sorts of interesting things. One especially handy set of tools runs HTML 
Tidy on your page and fixes any problems in it. 



No discussion of text editors is complete without a mention of the venerable 
UNIX editors that are the core of the early Internet experience. Most of the 
pioneering work on the Web was done in the UNIX and Linux operating sys- 
tems, and these environments had two extremely popular text-editor fami- 
lies. Both might seem obscure and difficult to modern sensibilities, but they 
still have passionate adherents, even in the Windows community. (Besides, 
Linux is more popular than ever!) 



VI stands for Visual Editor. That name seems strange now because most 
developers can't imagine an editor that's not visual. Back in the day, it was a 
very big deal that VI could use the entire screen for editing text. Before that 
time, line-oriented editors were the main way to edit text files. Trust me, you 
have it good now. Figure 3-2 shows a variant of VI (called VIM) in action. 

VI is a modal editor, which means that the same key sometimes has more 
than one job, depending on the editor's current mode. For example, the I key 
is used to indicate where you want to insert text. The D key is used to delete 
text, and so on. Of course, when you're inserting text, the keys have their 
normal meanings. This multi-mode behavior is baffling to modern users, but 
it can be amazingly efficient after you get used to it. Skilled VI users swear by 
it and often use nothing else. 

VI is a little too obscure for some users, so there's a number of variants float- 
ing around, such as VIM, for VI Improved. (Yeah, it should be VII but maybe 
they were afraid people would call it the Roman numeral seven.) VIM is a 
little friendlier than VI. It tells you which mode it's in and includes modern 
features like mouse support, menus, and icons. Even with these features, 
VIM is not intuitive for most people. 




The old standards: (/] and Emacs 
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Figure 3-2: 

VI isn't 
pretty, but 
after you 
know it, it's 
very 

powerful. 
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j PUBLIC "-//iraC//DT|) XHTML 1 . B Strict//EN" 
^□rg/TR/xhtnl1/DTD/xhtnl1-strict.dtd"> 
"' dir="ltr" xmlns="http://www.u3.org/1999/xhtml"> 

<net<i httpequiu= "content-type" content="text/xml; charset=utf-8" 

<title>UIM deno</title> 



/head: 
<body> 



<h1>UIH Dpoh</Ii1> 

<P> 

This page mas written with UIH, a windows uariant of III. 
UIM has all the features of UI, but it also includes modern 
menus, which really help you get started. 

</p> 

<P> 

Unlike ordinary UI, there's a little indicator in the bottom 
left corner indicating what mode you're in. 

</p> 



<p> 

If you're likely to Find yourself on UNIX someday, it nay be worth 
it to learn UI or UIH. Besides, if you're running UI on your 
Windows machine, you're pretty much the definition of a conputer 
nerd. 

</P> 
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Versions of VI are available for nearly any operating system being used. If 
you already know VI, you might enjoy using it for Web page development, as 
it has all the features you might need. If you don't already know VI, it's prob- 
ably more efficient for you to start with a more standard text editor, such as 
Notepad++. 



Emacs 

The other popular editor from the UNIX world is emacs. Like VI, you probably 
don't need this tool if you never use Linux or UNIX. But also like VI, if you 
know it already, you probably don't need anything else. Emacs has been a 
programmer's editor for a very long time, and it has nearly every feature you 
can think of. 

Emacs also has a lot of features you haven't thought of, including a built-in 
text adventure game and even a psychotherapist simulator. I really couldn't 
make this stuff up if I tried. 

Emacs has very powerful customization and macro features. It allows you to 
view and edit more than one file at a time. Emacs also has the ability to view 
and manipulate the local file system, manage remote files, access the local 
operating system (OS) shell, and even browse the Web or check e-mail with- 
out leaving the program. If you're willing to invest in a program that takes 
some effort to understand, you'll have an incredibly powerful tool in your 
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kit. Versions of Emacs are available for most major operating systems. 
Emacs is one of the first programs I install on any new computer because it's 
yverful. A version of emacs is shown in Figure 3-3. 




An enhanced version — xemacs — uses standard menus and icons like 
modern programs, so it's reasonably easy to get started with. 

Emacs has an astonishing number of options and a non-standard interface, 
so it can be challenging for beginners. 



Other text editors 



Many other text editors are used in Web development. The most important 
thing is to find one that matches the way you work. If you don't like any of 
the editors I've suggested so far, here's a few more you might want to try: 



♦ SynEdit: This is much like Notepad++ and is very popular with Web 
developers. 

♦ Scintilla: This is primarily a programming editor, but it has nice support 
for XHTML coding. 

♦ jEdit: This is a text editor written in Java. It has nice features and is pop- 
ular, but some consider it slower than the other choices. 



Figure 3-3: 

Emacs is 
powerful but 
somewhat 
eccentric. 
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This page uas uritcen with the emacs text editor. 
Emacs is primarily a unix editor, but there are Windows 
versions like this one that include Windows -style menus. 



<P> 

Emacs involves a learni; 
popular among hard-core 
ton of useful features. 

</p> 

<P> 

In the other window is i 
psychotherapist ! 

</ P > 



i the psychotherap i 
are finished talking, type RET 



.ease, describe your problems. * B 



I would appreciate it if you would 
with emacs. 



It ' s a great ed; 
Why do you say : 



Maybe your plans have somet 
Hhat plans? 

Is it because of your life 
Huh? 

Perhaps you could continue. 
You aren't very helpful. 
You mentioned that you love 
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A tittle ancient history 

You've probably already noticed that browsers are inconsistent in the way 
they display and handle Web pages. It's useful to understand how we got 
into this mess. 
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s are meant to display in a browser; so, of course, you need browsers n 

'g. Not all browsers are the same, though, so you need more than one. o" 

As of this writing, there are two major browsers and a number of other signifi- <2. 

cant players in the browser world. It's important to know a little about the <= 

major browsers, which are discussed later in this section. ^ 



o 
o 



Mosaic/Netscape — the kilter application 

In the beginning, browsers were written by small teams. The most important 
early browser was Mosaic and was written by a team based at the National 
Center for Supercomputing Applications (NCSA) in Champaign-Urbana, Illinois. 

Several of the members of that NCSA team decided to create a completely 
commercial Web browser. Netscape was born, and it quickly became the 
most prominent and important browser, with 97-percent market share at the 
peak of its popularity. 



Microsoft enters (and Wins) the battle 

Microsoft came onto the scene with Internet Explorer (IE). A bitter fight (some- 
times called the Browser Wars) ensued between Microsoft and Netscape. Each 
browser added new features regularly. Eventually, entire sets of tags evolved, 
so a Web page written for IE would not always work in Netscape and vice-versa. 
Developers had three bad choices: pick only one browser to support, write two 
versions of the page, or stick with the more limited set of features common to 
both browsers. 

Netscape 6.0 was a technical disappointment, and Microsoft capitalized, 
earning a nearly complete lock on the browser market. Microsoft's version of 
standards became the only standards because there was virtually no compe- 
tition. After Microsoft won the fight, there was a period of stability but very 
little innovation. 



Firefox shakes up the World 

A new browser rose from the ashes of Netscape (in fact, its original name 
was Firebird, after the mythical bird that rises from its own ashes). Its name 
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was later changed to Firefox, and it breathed new life into the Web. Firefox 
has several new features that are very appealing to Web developers: 



lid compliance to standards: Firefox followed the W3C standards 
almost perfectly. 

♦ Tabbed browsing: One browser window can have several panels, each 
with its own page. 

♦ Easy customization: Firefox developers encouraged people to add improve- 
ments and extensions to Firefox. This led to hundreds of interesting 
add-ons. 

♦ Improved security: By this time, a number of security loopholes in IE 
were publicized. Although Firefox has many of the same problems, it has 
a much better reputation for openness and quick solutions. 



OverView of the prominent browsers 

The browser is the primary tool of the Web. All your users view your page 
with one browser or another, so you need to know a little about each of them. 



Microsoft Internet Explorer 7 

Microsoft Internet Explorer (MSIE or simply IE) is currently the most popular 
browser on the planet. Before Firefox came along, IE was used by a vast major- 
ity of Web users. IE is still extremely prevalent because it comes installed with 
Microsoft Windows. Of course, it also works best with Microsoft Windows. A ver- 
sion is also available for Macs, but Linux users aren't supported (they don't seem 
too upset about it, though). 

The current version of IE is Internet Explorer 7, the first major improvement 
in IE for years. IE7 features some welcome additions, including tabbed 
browsing and improved compliance with the W3C standards. Cynics have 
suggested these improvements are a response to Firefox. Still, IE is a better 
browser than it has been in a long time. 

If you write your code to XHTML 1.0 Strict standards, it almost always displays 
as expected in IE7. 



Older Versions of Internet Explorer 

The earlier versions of IE are still extremely important because there are so 
many computers out there that don't have IE7 installed yet. 

Microsoft made a version of IE available for programmers to embed in their 
own software, so a lot of custom browsers are actually IE with a different 
skin. Most of the custom browsers that are installed with the various 
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broadband services are simply dressed up forms of IE. Therefore, IE is even Book I 
more common than you might guess because people might be using a ver- Chapter 3 

while thinking it's something else. 



o 



IE6 and earlier versions used Microsoft's own variation of standards. They ° 
display old-style HTML well, but these browsers don't comply perfectly with =' 
all the W3C standards. Having a version of one of these older browsers -< 
around is important so you can see how your pages display in them. If you 5 
write standards-compliant code, you'll find that it doesn't work perfectly in o' 
these variations. You need to do some tweaking to make some features come 
out right. Don't panic because they're relatively small details, and I point out 
the strategies you need as we go. 

Checking your pages on IE6 or earlier is necessary. Unfortunately, if you have 
IE7 or whatever comes next, you probably don't have IE6 anymore. You can't 
have two versions of IE running on the same machine at once (at least, not 
easily), so you might need to keep an older machine just for testing purposes. 

Microsoft has versions of IE for the Mac OS. Like other early versions of IE, it 
tends to go its own way and doesn't follow the standards exactly. 



Mozitta Firefox 

Developers writing standards-compliant code frequently test their pages in 
Firefox because it has a great reputation for standards compliance. Firefox 
has other advantages, as well, such as 

♦ Better code view: If you view the HTML code of a page, you see the code 
in a special window. The code has syntax coloring, which makes it easy 
to read. IE often displays code in Notepad, which is confusing because 
you think you can edit the code, but you're simply editing a copy. 

♦ Better error-handling: You'll make mistakes. In general, Firefox does a 
better job of pointing out errors than IE, especially when you begin 
using JavaScript and other advanced technologies. 

♦ Great extensions: As you see later in this chapter, Firefox has some won- 
derful extensions that make Web development a lot easier. These exten- 
sions allow you to modify your code on the fly, automatically validate 
your code, and find out all about what's going on under the hood. 

Other notable browsers 

Firefox and IE are the big players in the browser world, but they certainly 
aren't the only browsers you will encounter. 
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Opera 

The Opera Web browser is one of the earliest standards-compliant browsers, 
technically solid browser but has never been widely used. If you 
\ your pages with strict compliance in mind, users with Opera have no 
problems accessing them. 



Safari 

Apple includes a Web browser in all recent versions of the Mac OS. The 
current incarnation — Safari — is an excellent standards-compliant browser. 
Safari was traditionally designed only for the Mac, but a Windows version 
has been released recently. 



Mozitta 

There's still a Mozilla browser, but it has been replaced largely with Firefox. 
Because Mozilla uses the same underlying engine, it renders code the same 
way Firefox does. 



Portable browsers 

The Web isn't just about desktops anymore. Lots of people browse the Web 
with cell phones, iPhones, and PDAs. These devices often have specialized 
Web browsers designed to handle the particular needs of the portable com- 
puting model. However, these devices usually have tiny screens, small memory 
capacity, and slower download speeds than their desktop cousins. A portable 
browser can almost never display a page as it was intended on desktop 
machines. Portable browsers usually do a good job of making standards- 
compliant code work, but they really struggle with other types of HTML 
(especially tables used for formatting). 



Text-only browsers 

There are browsers that don't display any graphics at all. Some, like Lynx, 
are intended for the old command-line interfaces. This may seem completely 
irrelevant today, but they are incredibly fast because they don't display 
graphics. Auditory browsers read the contents of Web pages. They were 
originally intended for people with visual disabilities, but they are often used 
by people without any disabilities, as well. Fire Vox is a variant of Firefox that 
reads Web pages aloud. 



The bottom tine in browsers 

Really, you need to have access to a couple browsers, but you can't possibly 
have them all. I tend to do my initial development testing with Firefox. I then 
check pages on IE7 and IE6. 1 also check the built-in browser on my cell 
phone and PDA to see how it works there. Generally, if you get a page that 
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gives you suitable results on IE6, IE7, and Firefox, you can be satisfied that it Book I 

works on most browsers. However, there's still no guarantee. If you follow Chapter 3 
ards, your page displays on any browser, but you might not get the 

out you expected. 5 
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One of the best features of Firefox is its support for extensions. Hundreds of 
clever and generous programmers have written tools to improve and alter 
Firefox's performance. Three of these tools — the HTML Validator, Web 
Developer toolbar, and Firebug — are especially important to Web developers. 
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Validating your pages With HTML Validator 

In Chapter 2 of this minibook, I explain how important Web standards are 
and how to use online services such as http : / /validator . w3 . org and 
HTML Tidy online (http : / /inf ohound . net/ tidy). These are terrific serv- 
ices, but it would be even better to have these Validators built directly into 
your browser. The HTML Validator extension by Marc Gueury is a tool that 
does exactly that: It adds both the W3C Validator and HTML Tidy to your 
Firefox installation. 



When you have this extension (available on the CD-ROM) running, you have 
an error count in the footer of every page you visit. (You'll be amazed how 
many errors are on the Web.) You'll be able to tell immediately if a page has 
validation errors. 



With the HTML Validator, your View Source tool is enhanced, as shown in 
Figure 3-4. 

The View Source tool becomes much more powerful when you run HTML 
Validator, as follows: 



♦ Each error is listed in an errors panel. This is exactly the same error 
list you see from W3C. 

♦ Clicking on an error highlights it in the source-code listing. This 
makes it easy to see exactly what line of code triggers each error. 

♦ Complete help is shown for every error. The Validator toolbar presents 
much more helpful error messages than the official W3C results. 

♦ Automated clean-up. You can click the Clean Up link, and the Validator 
extension automatically applies HTML Tidy to your page. This can be a 
very effective way to fix older pages with many errors. 
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Figure 3-4: 

The HTML 
Validator 
explains all 
errors in 
your page. 
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The HTML Validator tool will revolutionize your Web development experi- 
ence. It really helps you create standards-compliant sites easily, and it has 
the added benefit of helping you rapidly discover the level of compliance of 
any page you visit. (It's fun to feel superior.) 

Using the Web Developer toolbar 

The Web Developer toolbar by Chris Pederick provides all kinds of useful 
tools for Web developers. The program installs as a new toolbar in Firefox, 
as shown in Figure 3-5. 

Figure 3-5 shows the Wiley home page with some of the Web Developer tool- 
bar features active. The Edit CSS frame on the left allows me to modify the 
look of the page in real time, and the thick outlines were added by the tool- 
bar to help visualize the page organization. (I describe these ideas in detail 
in Books III and IV.) 

When you have the Web Developer toolbar activated (use the ViewO 
Toolbars menu command to hide or show it), you can use it to do the following: 

♦ Edit your page on the fly. The Edit HTML Entry option on the Miscellaneous 
menu opens a small text editor on the side of the screen. You can make 
changes to your HTML here and immediately see the results in the main 
screen. The changes aren't permanent, but you can save them. 
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Figure 3-5: 

The Web 
Developer 
toolbar adds 
several 
features to 
Firefox. 
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4- Validate your pages. There's a menu command (CSSOEdit CSS) to vali- 
date your page, but the Web Developer toolbar also adds some hotkeys 
to Firefox so you can instantly send your page to the W3 Validator. 
Ctrl+Shift+A contacts the W3 Validator and then sends your page 
directly to it. It's much easier than memorizing the Validator address. 
This feature alone is worth the download time. You can also do other 
kinds of validation, check your CSS, or see how well your page conforms 
to various guidelines for people with disabilities. 

♦ Manipulate CSS code. After you define your page with XHTML, use CSS 
to dress it up. The CSS menu has a number of great tools for seeing how 
CSS is set up and experimenting with it on the fly. I explain how to use 
the CSS tools in Books II and III, where I describe CSS. 

♦ View your page in different sizes. Not everybody has a huge flat-panel 
display. It's important to see how your page looks in a number of stan- 
dard screen resolutions. 

♦ Get a speed report. Your Web page may load great on your broadband 
connection, but how does it work on Aunt Judy's dialup? Web Developer 
has a tool that analyzes all the components of the page, reports how 
long each component takes to download over various connections, and 
suggests ways to improve the speed of your page's download. 
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The Web Developer toolbar can do a lot more, but those are some of the 
highlights. The toolbar is a small and fast download, and it makes Web devel- 
t a lot easier. There's really no good reason to not use it. 

0 Firebug 

The Firebug extension is another vital tool for Web developers. Firebug con- 
centrates more on JavaScript development rather than pure XHTML devel- 
opment, but it's also useful for XHTML beginners. Figure 3-6 shows the 
Firebug extension opened as a panel in Firefox. 

The Inspect mode allows you to compare the HTML code to the output. When 
you move your mouse over a part of the rendered page, Firebug highlights 
the relevant part of the code in the other panel. Likewise, you can move the 
mouse over a code fragment and see the affected code segment. This can be 
extremely handy when things aren't working out like you expect. 

You can view the HTML code as an outline, which helps you see the overall 
structure of the code. You can also edit the code in the panel and see the 
results immediately, as you can with the Web Developer toolbar, which I dis- 
cuss in the previous section. Changes you make in Firebug aren't permanent, 
but you can copy them to your text editor. 
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Figure 3-6: 

Firebug 
gives a 
detailed 
view of you 
page. 
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Firebug really shows off when you get to more sophisticated techniques, such Book I 

as_CSS, DOM Manipulation, JavaScript, and AJAX. Although you discover Chapter 3 
hnologies in Books IV and VII show you how Firebug can be used to 

se processes. 5 



Using a Futt-Btou/n IDE 



You might think I hate dedicated Web page editors, but I don't. I use them all 
the time for other kinds of programming. The problem is that up until 
recently, there weren't any real IDEs (Integrated Development Environments) 
for Web development. Most of the tools try to be visual development tools 
that automate the design of visual pages, rather than programming environ- 
ments. They have flaws because Web development is really a programming 
problem with visual design aspects, rather than a visual design problem with 
programming underneath. 
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A couple of IDEs have popped up recently in the open-source community. 
One tries to be like the commercial tools (and ends up replicating some of 
their flaws). 

Another editor has emerged that seems to be a good compromise between help- 
ing you write solid code and growing with you as you get more sophisticated. 



Introducing MVu 

One of the most popular HTML IDEs in the open-source community is Nvu 
(pronounced en-view). This editor has a number of editing modes, making it 
very popular with beginners. 

Nvu is available on the CD-ROM that accompanies this book or at http : / / 
nvu . com. 



It defaults to a WYSIWYG mode, like most word processors, as shown in 
Figure 3-7. 

Unlike ordinary word processors, Nvu can show you the code underneath. 
Figure 3-8 shows the same page with the HTML Tags view enabled. 

It might surprise you that there are no <p> tags shown in Figure 3-8. Nvu 
uses the <br /> tag instead, which means your code won't validate without 
modification. (I have 11 errors because of the missing <p> tags.) 

Figure 3-9 demonstrates source mode, which shows the actual source code. 

You can modify the code directly in this mode (and you'll need to, if you 
want the page to validate). 
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Figure 3-9: 
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Although Nvu has some advantages — especially the spell-checking feature — 
it encourages bad habits (like most WYSIWYG tools). Because it's safest to 
use this tool in source mode, you might as well use some other tool that has 
more features in text mode. 

Introducing Aptana 

My preferred editor for beginners who intend to become advanced is Aptana 
(available on the CD-ROM or at www . aptana . com). Aptana Studio is a full- 
blown IDE, based on the popular Eclipse editor. Aptana has a lot of features 
that make it a good choice for Web developers: 

♦ Syntax completion: Aptana has built-in knowledge of HTML (and several 
other languages). When you start to type HTML code, it recognizes the 
code and pops up a list of suggestions. Figure 3-10 shows Aptana helping 
on some HTML code. 

♦ Automatic ending tags: As soon as you write a beginning tag, Aptana 
automatically generates the corresponding end tag. This makes it much 
less likely that you'll forget an ending tag — one of the most common 
coding errors. 

♦ Automatically generated XHTML template: When you tell Aptana to 
create an HTML page, it can generate the page template with all the 
messy doctype stuff built in. (I explain how to customize this feature in 
the next section.) 
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Aptana's code suggestion 



♦ Error detection: Aptana can look at the code and detect certain errors. 
Although it isn't a replacement for a Validator, it can be a very handy 
tool, especially when you begin to write JavaScript code. 

♦ File management tools: Aptana makes it easy to work both with the 
local file system and pages that reside on servers on the Internet. 

♦ Page preview: You can preview your page directly within Aptana, or you 
can view it in your primary browser. 

♦ Outline view: This panel displays the page structure as an outline. It 
helps you see the overall structure of the page. You can also use this 
panel as a table of contents to quickly get to any particular part of your 
page in the editor. Figure 3-1 1 shows the Outline view in action. 

♦ Advanced features: When you're ready to try JavaScript and AJAX, 
Aptana has nice support for these more advanced technologies. The 
syntax-highlighting features work in CSS, JavaScript, and PHP, just like 
they do in HTML. This means you can use the same editor for all your 
Web languages, which is a really great thing. 
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Aptana Studio currently comes in two versions. The Community Edition is 
free and open-source, and the Professional Edition has additional features. I 
use the Community Edition throughout this book, as it has more than 
enough features for beginning Web developers. 

Customizing Aptana 

Aptana is a pretty great editor, but I recommend you change a few settings 
after you install it on your system. 



Getting to the HTML editor preferences 

Aptana can be customized in a lot of ways. For now, the only preferences you 
need to change are in the HTML editor. Choose WindowsOPreferences, and 
in the Preferences dialog box, expand the Aptana link and select HTML 
Editor. The dialog box looks like Figure 3-12. 



Changing the extension 

By default, Aptana saves files with the . htm extension. Because this is the 
extension normally used only by Microsoft servers, I prefer to save pages 
with . html. All Web pages in this book are stored with the . html extension. 
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Figure 3-12: 
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HTML Editor 
Preferences 
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Changing the initial contents 

When you create a new Web page in Aptana, a basic template appears. This 
is convenient, but it creates an HTML 4.0 doctype. Open template . html in 
a normal text editor, copy it, and paste it to the provided text area, and your 
pages will all begin with the standard template. 



Changing the </ieu? 

Aptana allows you to split the screen with your code in one panel and a 
browser view in another. Every time you save your code, the browser view 
immediately updates. This is a really good tool, especially for a beginner, 
because you can get very quick feedback on how your page looks. In the 
Html Editor Mode section in the Preferences dialog box (see Figure 3-12), 
you can indicate whether you want the browser preview to be in a separate 
tab, in a horizontal split screen, or in a vertical split screen. I use tabs because 
I like to see as much code as possible on-screen. I switch to the preview tab 
when I need to see how the page looks to the browser. 
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In This Chapter 

Understanding basic lists 
C* Creating unordered, ordered, and nested lists 
w Building definition lists 
v* Building basic tables 

Using rowspan and col span attributes 

1# ou'll often need to present large amounts of information organized in 
W~ some way, and XHTML has some wonderful tools to manage this task. 
XHTML has three different kinds of lists and a powerful table structure for 
organizing the content of your page. Figure out how these tools work, and 
you can manage complex information with ease. 

Making a List and Checking It Tu/ice 

XHTML supports three types of lists. Unordered lists generally contain 
bullet points. They're used when the order of elements in the list isn't 
important. Ordered lists usually have some kind of numeric counter preced- 
ing each list item, and definition lists contain terms and their definitions. 

Creating an unordered tist 

All the list types in XHTML are closely related. The simplest and most 
common kind of list is an unordered list. 

Looking at an unordered (ist 

Look at the simple page shown in Figure 4-1. In addition to a couple of head- 
ers, it has a list of information. 

The list of browsers has some interesting visual characteristics: 

♦ The items are indented. There's some extra space between the left 
margin and the beginning of each list item. 
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♦ The list elements have bullets. That little dot in front of each item is a 
bullet. Bullets are commonly used in unordered lists like this one. 



ch item begins a new line. When a list item is displayed, it's shown 
a new line. 




These characteristics help you see that you have a list, but they're all just 
default behavior. Defining something as a list doesn't force it to look a partic- 
ular way, but there is a default view that helps you see that these items are 
indeed part of a list. 

It's important to remember the core idea of XHTML here. You aren't really 
describing how things look, but what they mean. As you discover various 
kinds of listing structures, you'll see that the browsers automatically change 
what appears on-screen to indicate the various kinds of lists. You can change 
the appearance later when you figure out CSS, so don't get too tied up in the 
particular appearance of things. For now, just recognize that HTML (and by 
extension, XHTML) can build lists and make sure you know how to use the 
various types. 



Figure 4-1: 

An 

unordered 
list of Web 
browsers. 
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Building an unordered list Book i 

Li|ts are made with two kinds of tags. One tag surrounds the entire list and Chapter 4 
the general type of list. This first example demonstrates an 
d list, which is surrounded by the <ul></ul> pair. 




Note that it's common to indent all the code inside the <ul> set. The = n> = 

a. £*. so 

unordered list can go in the main body. _t ° <S. 

Inside the <ul></ul> set is a number of list items. Each element of the list ™ S- 

is stored between a <li> (list item) and a </li> tag. Normally, each 
<lix/li> item goes on its own line of the source code, although you can 
make a list item as long as you want. 

Look to Book II, Chapter 4 for information on how to change the bullet to all 
kinds of other images, including circles, squares, and even custom images. 

The code for the unordered list is pretty straightforward: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 



<title>basicUL .html</title> 
</head> 
<body> 

<hl>Basic Lists</hl> 

<h2>Common Web Browsers</h2> 

<ul> 

<li>Firef ox</li> 
<li>Internet Explorer</li> 
<li>Opera</li> 
<li>Safari</li> 

</ul> 



</body> 
</html> 



Creating ordered tists 

Ordered lists are almost exactly like unordered lists. Ordered lists tradition- 
ally have numbers rather than bullets (although you can change this 
through CSS if you want, as you see in Book III, Chapter 3). 



Viewing an ordered list 

Figure 4-2 demonstrates a page with a basic ordered list — basicOL . html. 

Figure 4-2 shows another list (like in Figure 4-1), but this time, the items are 
numbered. When your data is a list of steps or information with some type of 
numerical values, an ordered list is a good choice. 
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Figure 4-2: 

A simple 
ordered list. 



3 be5icOL.html - Mozilla Firefox K 


□SB 


• ^ | <5f u %::A'C; ; ^i^am%2CFiles;samM^:docs;x^..'x'tl:.- 1 :basicO..'itiiii » !*■ [G|- 






D.s^^^Q Cookies ' ~1 CSS - ID Forms • !*i Images - O Information - > Miscellaneous ' ^ OutSne - * £ Resize - jJ J Tools • ^ View Source - ■ Options - 


®%ti^^^ & I like It! ^ \Q> * Send to' Q Channel: Q 2k ^ ttl Al • ^ Favorites mm Friends Tools - 


bas.cUL.html |jj J (J hwhjQLliliiJ U 


Basic Ordered List 




Top ten dog names in the USA 




1. Max 








3 Buddy 




4. Maggie 
5- Bear 




6 Molly 




7. Bailey 




S. Shadow 




9. Sam 




10. Lath- 




data from http: www. bowwow. com.au 




Done © 0 Now: Sunny, 64 C F i l< 
■fUfciil^J ' 3 Windows... -| i§Jxfdi.4ah.do... | JVJ Aptana -ba... ^^^Si 1 . X Notepad** ... | 4^ClipboardOi... |Q 


ton:79 a F /-^ Tue: 86 C F ^ 
•xC^S**© i n :03 AM 



Building the ordered list 

The code for basicOL . html is remarkably similar to the unordered list: 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>basic0L .html</title> 
</head> 

<body> 

<hl>Basic Ordered List</hl> 

<h2>Top ten dog names in the USA</h2> 

<ol> 

<li>Max</li> 

<li>Jake</li> 

<li>Buddy</li> 

<li>Maggie</li> 

<li>Bear</li> 

<li>Molly</li> 

<li>Bailey</li> 

<li>Shadow</li> 

<li>Sam</li> 

<li>Lady</li> 
</ol> 
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data from http: //www. bowwow. com.au 
</p> 



<li></li> pairs used in the unordered list. 

You don't indicate the item number anywhere. It's automatically generated 
based on the position of each item within the list. Therefore, you can change 
the order of the items, and the numbers are still correct. 
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ft 3 g 

Note that the only change is the list tag itself. Rather than the <ul> tag, the a 3 » 

ordered list uses the <ol> indicator. The list items are still exactly the same 

S 1 = 5' 




This is one of those places where it's really great that XHTML is about mean- 
ing, not layout. If you specified the actual numbers, it'd be a mess to move 
things around. All that really matters here is that the element is inside an 
ordered list. 



Making nested lists 

Sometimes, you'll want to create outlines or other kinds of complex data in 
your pages. You can easily nest lists inside each other, if you want. Figure 4-3 
shows a more complex list describing popular cat names in the U.S. and 
Australia. 



Figure 4-3 uses a combination of lists to do its work. This figure contains a 
list of two countries: the U.S. and Australia. Each country has an H3 heading 
and another (ordered) list inside it! You can nest various elements inside a 
list, but you have to do it carefully if you want the page to validate. 

In this example, there's an unordered list with only two elements. Each of 
these elements contains an <h3 > heading and an ordered list. The page han- 
dles all this data in a relatively clean way and validates correctly. 

Examining the nested list example 

The entire code for nestedList .html is reproduced here: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>nestedList .html</title> 
</head> 



<body> 

<hl>Nested Lists</hl> 
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<h2>Popular Cat Names</h2> 
<ul> 
<H> 

<h3>USA</h3> 
<ol> 

<li>Tigger</li> 
<li>Tiger</li> 
<li>Max</li> 
<li>Smokey</li> 
<li>Sam</li> 
</ol> 
</li> 
<li> 



<h3 >Australia</h3> 
<ol> 

<li>Oscar</li> 
<li>Max</li> 
<li>Tiger</li> 
<li>Sam</li> 
<li>Misty</li> 
</ol> 
</li> 
</ul> 
</body> 
</html> 
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's a large <ul> set surrounding the entire main list, 
ain list has only two list items. 

♦ Each of these items represents a country. 

♦ Each country has an <h3> element, describing the country name inside 
the <li>. 

♦ Each country also has an <ol> set with a list of names. 

♦ The indentation really helps you see how things are connected. 
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Indenting your code 

You might have noticed that I indent all the XHTML code in this book. The 
browsers ignore all indentation, but it's still an important coding habit. 

There are many opinions about how code should be formatted, but I use a 
standard format in this book that serves you well until you can develop your 
own style. 

I generally use the following rules to indent HTML/XHTML code: 

♦ Indent each nested element. Because the <head> is inside the <html> 
element, I indent to indicate this. Likewise, the <li> elements are 
always indented inside <ul> or <ol> pairs. 

♦ Line up your elements. If an element takes up more than one line, line up 
the ending tag with the beginning tag. This way, you know what ends what. 

♦ Use spaces, not tabs. The tab character often causes problems in 
source code. Different editors format tabs differently, and a mixture of 
tabs and spaces can make your carefully formatted page look awful 
when you view it in another editor. 

If you are using Aptana (and you really should — see Chapter 3 in this 
minibook for more information about it), note that Aptana's autoformat- 
ting defaults to tabs. From the Window menu, select Preferences. Then 
find the AptanaOEditors panel and select Insert Spaces Instead of Tabs. 

♦ Use two spaces. Most coders use two or four spaces per indentation 
level. HTML elements can be nested pretty deeply. Going seven or eight 
layers deep is pretty common. If you use tabs or too many spaces, you'll 
have so much white space that you can't see the code. 

Aptana defaults to four spaces, but you can change it to two. From the 
General menu, select Editors then Text Editors, and set Displayed Tab 
Width to 2. 



Making a List and Checking It Twice 



let 

oks 



♦ End at the left margin. If you finish the page and you're not back at the 
left margin, you've forgotten to end something. Proper indentation 
akes it easy to see your data structure. Each element should line up 
jth its closing tag. 



Building a nested list 

If you just look over the code for the nested list, it can look intimidating. It 
isn't really that hard. The secret is to build the list outside in: 

1. Create the outer list first. 

Build the primary list (whether it's ordered or unordered). In my example, 
I began with just the unordered list with the two countries in it. 

2. Add list items to the outer list. 

If you want text or headlines in the larger list (like I did), you can put 
them here. If you're putting nothing but a list inside your primary list, 
you may want to put some placeholder <li> tags in there just so you 
can be sure everything's working. 

3. Validate before adding the next list level. 

Nested lists can confuse the Validator (and you). Validate your code with 
the outer list to make sure there are no problems before you add inner lists. 

It. Add the first inner list. 

After you know the basic structure is okay, add the first interior list. For 
my example, this was the ordered list of cat names in the U.S. 

5. Repeat until finished. 

Keep adding lists until your page looks right. 

6. Validate frequently. 

It's much better to validate as you go than to wait until everything's 
finished. Catch your mistakes early so you don't replicate them. 



Building the definition list 

One more type of list — the definition list — is very useful, even if it isn't 
used frequently. The definition list was originally designed to format diction- 
ary-style definitions, but it's really useful anytime you have name and value 
pairs. Figure 4-4 shows a sample definition list in action. 

Definition lists don't use bullets or numbers. Instead, they have two ele- 
ments. Definition terms are usually words or short phrases. In Figure 4-4, the 
browser names are defined as definition terms. Definition descriptions are the 
extended text blocks that contain the actual definition. 
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The standard layout of definition lists indents each definition description. Of 
course, you can change this layout however you want after you understand 
CSS in Books II and III. 

You can use definition lists any time you want a list marked by key terms, 
rather than bullets or numbers. The definition list is also useful in other situ- 
ations, like forms, figures with captions, and so on. 

Here's the code for basicDL . html: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 ,org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>BasicDL .html</title> 
</head> 

<body> 

<hl>Basic Definition List</hl> 
<h2>Common Web Browsers</h2> 
<dl> 

<dt>Mosaic</dt> 

<dd> 
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The mother of all modern browsers. The first widely used 
visual browser. 
/dd> 

dt>Netscape< /dt> 
dd> 

The commercial successor to Mosaic. Widely popular, but 
eventually eclipsed by Internet Explorer 
</dd> 

<dt>IE</dt> 
<dd> 

Microsoft's entry into the browser market, and a dominant 
player . 

</dd> 

<dt>Firef ox</dt> 

<dd> 

An open-source browser that has shaken up the world. 

</dd> 
</dl> 
</body> 
</html> 

As you can see, the definition list uses three tag pairs: 

4- <dlx/dl> defines the entire list. 

4- <dtx/dt> defines each definition term. 

4 <ddx/dd> defines the definition data. 

Definition lists aren't used as often as they might be, but they can be 
extremely useful. Any time you have a list that will be a combination of 
terms and values, a definition list is a good choice. 
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Building Tables 

Sometimes, you'll encounter data that fits best in a tabular format. XHTML 
supports several table tags for this kind of work. Figure 4-5 illustrates a very 
basic table. 

Sometimes, the best way to show data in a meaningful way is to organize it in 
a table. XHTML defines a table with the (cleverly named) <table> tag. The 
table contains a number of table rows (defined with the <tr> tag). Each 
table row can consist of a number of table data (<td>) or table header 
(<th>) tags. 

Compare the output in Figure 4-5 with the code that creates it in 
basicTable .html, for an example: 
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<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 
<title>basicTable . html</ title> 
</head> 

<body> 

<hl>A Basic Table</hl> 
<h2>XHTML Super Heroes</h2> 
< table border = "1"> 

<tr> 

<th>Hero</th> 

<th>Power< / th> 

< th>Nemes i s < / th> 
</tr> 

<tr> 

<td>The XMLator</td> 
<td>Standards compliance</td> 
<td>Sloppy Code Boy</td> 
</tr> 

<tr> 

<td>Captain CSS</td> 
<td>Super-layout</td> 
<td>Lord Deprecated</td> 
</tr> 
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<tr> 
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<td>Browser Woman</td> 
<td>Mega-Compatibility</ td> 
<td>Ugly Code Monster</td> 
/tr> 



</table> 
</body> 
</html> 



Befitting the table 



The XHTML table is defined with the <table></table> pair. It makes a lot 
of sense to indent and space your code carefully so you can see the struc- 
ture of the table in the code. Just by glancing at the code, you can guess that 
the table consists of three rows and each row consists of three elements. 

In a word processor, you typically create a blank table by defining the number 
of rows and columns, and then fill it in. In XHTML, you define the table row 
by row, and the number of columns is automatically determined by the 
number of elements in each row. It's up to you to make sure each row has 
the same number of elements. 

By default (in most browsers, anyway), tables don't show their borders. If 
you want to see basic table borders, you can turn on the table's border 
attribute. (An attribute is a special modifier you can attach to some tags.) 



<table border 



■1"> 




This tag creates a table and specifies that it will have a border of size 1. If 
you leave out the border = " 1 " business, some browsers display a border 
and some don't. You can set the border value to 0 or to a larger number. The 
larger number makes a bigger border, like you see in Figure 4-6. 

Although this method of making table borders is perfectly fine, I show a 
much more flexible and powerful technique in Book II, Chapter 4. 

It's always a good idea to set a table border because you can't count on 
browsers to have the same default. Also, note that the border value always 
goes in quotes. When you read about CSS in Book II (are you getting tired of 
hearing that?), you discover how to add more complex and interesting bor- 
ders than this simple attribute allows. 



Adding your first rout 

After you define a table, you need to add some rows. Each row is indicated 

by a <tr></tr> pair. 
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Inside the <tr></tr> set, you need some table data. The first row often 
consists of table headers. These are special cells that are formatted differ- 
ently to indicate they're labels, rather than data. 




Table headers have some default formatting to help you remember 
they're headers, but you can change the way they look. You can change the 
table header's appearance in all kinds of great ways in Books II and III. Define 
the table header so when you discover formatting and decide to make all 
your table headers chartreuse, you'll know where in the HTML code all 
the table headers are. 



Indent your headers inside the <tr> set. If your table contains three 
columns, your first row might begin like this: 



<tr> 

<thx/th> 
<thx/th> 
<thx/th> 

</tr> 



Place the text you want shown in the table headers between the <th> and 
</th> elements. The contents appear in the order they're defined. 
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Headings don't have to be on the top row. If you want headings on the left, 
Just put a <th></th> as the first element of each row. You can have headings 
lat-bMh the top and the left, if you want. In fact, you can have headings any- 
jwhq?fr. but it usually makes sense to put headings only at the top or left. 

Making your data routs 

The next step is to create another row. The data rows are just like the heading 
row, except they use <td></td> pairs, rather than <th></th> pairs, to 
contain the data elements. A three-column table typically has blank rows 
that look like this: 



<tr> 

<tdx/td> 
<tdx/td> 
<tdx/td> 

</tr> 



Place the data elements inside the <td></td> segments, and you're ready 
to go. 



Building tables in the text editor 

Some people think that tables are a good reason to use WYSIWYG (what you 
see is what you get) editors because they think it's hard to create tables in text 
mode. You have to plan a little, but it's really quite quick and easy to build an 
HTML table without graphical tools if you follow this plan: 



/. Plan ahead. 

Know how many rows and columns will be in the table. It might help to 
sketch it on paper first. Changing the number of rows later is easy, but 
changing the number of columns can be a real pain after some of the 
code has been written. 

2. Create the headings. 

If you're going to start with a standard headings-on-top table, begin by 
creating the heading row. Save, check, and validate. You don't want mis- 
takes to multiply when you add more complexity. This heading row tells 
how many columns you'll need. 

3. Build a sample empty row. 

Make a sample row with the correct number of td elements with one 
<td></td> pair per line. Build one td set and use copy and paste to 
copy this data cell as many times as you need. Make sure the number of 
td pairs equals the number of th sets in the heading row. 

4. Copy and paste the empty row to make as many rows as you need. 

5. Save, view, and validate. 
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Be sure everything looks right and validates properly before you put a 
lot of effort into adding data. 



late the table with the data you need. 

Go~row by row, adding the data between the <td></td> pairs. 

7. Test and validate again to make sure you didn't accidentally break 
something. 

Spanning, rovtis and columns 

Sometimes, you need a little more flexibility in your table design. Figure 4-7 
shows a page from an evil overlord's daily planner. 

Being an evil overlord is clearly a complex business. From a code standpoint, 
the items that take up more than one cell are the most interesting. Designing 
traps takes two mornings, and improving the lair takes three. All Friday after- 
noon and evening are spent on world domination. Take a look at the code, 
and you'll see how it works: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
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Some of 
these 
activities 
take up 
more than 
one cell. 
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Using colspan and rowspan 



Monday 


Tuesday 


Wednesday | Thursday 


Friday 


Breakfast In lair 


with cronies 


In lair [in lak m lak 


Morning Design traps 


improve Hideout 


Afternoon train minions 


train minions 


train minions [train minions 


world domination 


Evening manaical laughter 


manaical laughter 


manaical laughter [manaical laughter 



New: Sunny, 64°F 
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<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
tle>tableSpan . html< / title> 

d> 

<body> 

<hl>Using colspan and rowspan</hl> 
<table border = "1"> 

<caption>My Schedule</caption> 

<tr> 

<thx/th> 

< th>Monday< / th> 

< th>Tuesday< / th> 
<th>Wednesday< / th> 

< th>Thursday< / th> 
<th>Friday</th> 

</tr> 

<tr> 

<th>Breakf ast</th> 
<td>In lair</td> 
<td>with cronies</td> 
<td>In lair</td> 
<td>in lair</td> 
<td>in lair</td> 
</tr> 

<tr> 

< th>Morning< / th> 

<td colspan = "2">Design traps</td> 

<td colspan = "3">Improve Hideout</td> </tr> 
<tr> 

< th>Af ternoon< / th> 
<td>train minions</td> 
<td>train minions</td> 
<td>train minions</td> 
<td>train minions</td> 

<td rowspan = "2">world domination</td> 
</tr> 

<tr> 

< th>Evening< / th> 
<td>maniacal laughter</td> 
<td>maniacal laughter</td> 
<td>maniacal laughter</td> 
<td>maniacal laughter</td> 

</tr> 

</table> 

</body> 
</html> 




The secret to making cells larger than the default is two special attributes: 

rowspan and colspan. 
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ing activities tend to happen over several days. Designing traps 
both Monday and Tuesday morning, and improving the hideout will ^ s - 

occupy the remaining three mornings. Take another look at the Morning row, ET jg 

and you'll see how this is done: 2j « - 



<tr> 

< th>Morning< / th> 

<td colspan = "2">Design traps</td> 
<td colspan = "3">Improve Hideout</td> 

</tr> 
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The Design Traps cell spans over two normal columns. The colspan attrib- 
ute tells how many columns this cell will take. The Improve Hideout cell has 

a colspan of 3. 

It's important to note that the Morning row still takes up six columns. The 
<th> is one column wide, like normal, but the Design Traps cell spans two 
columns and the Improve Hideout cell takes three, which totals six columns 
wide. If you increase the width of a cell, you need to eliminate some other 
cells in the row to compensate. 



Spanning multiple routs 

A related property — rowspan — allows a cell to take up more than one row 
of a table. Look back at the Friday column in Figure 4-7, and you'll see the 
World Domination cell takes up two time slots. (If world domination was 
easy, everybody would do it.) Here's the relevant code: 

<tr> 

< th>Af ternoon< / th> 
<td>train minions</td> 
<td>train minions</td> 
<td>train minions</td> 
<td>train minions</td> 

<td rowspan = "2">world domination</td> 
</tr> 

<tr> 

< th>Evening< / th> 
<td>maniacal laughter</td> 
<td>maniacal laughter</td> 
<td>maniacal laughter</td> 
<td>maniacal laughter</td> 
</tr> 

The Evening row has only five entries because the World Domination cell 
extends into the space that would normally be occupied by a <td> pair. 
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vant to use rowspan and colspan, don't just hammer away at the 
1 your editor. Sketch out what you want to accomplish first. I'm pretty 
t this stuff, and I still needed a sketch before I was able to create the 
Span code. 

Avoiding the table-based layout trap 

Tables are pretty great. They're a terrific way to present certain kinds of 
data. When you add the colspan and rowspan concepts, you can use tables 
to create some pretty interesting layouts. In fact, because old-school HTML 
didn't really have any sort of layout technology, a lot of developers came up 
with some pretty amazing layouts based on tables. You'll still see a lot of Web 
pages today designed with tables as the primary layout mechanism. 
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Using tables for layout causes some problems though, such as 



♦ Tables aren't meant for layout. Tables are designed for data presentation, 
not layout. In order to make tables work for layout, you have to do a lot 
of sneaky hacks, like tables nested inside other tables or invisible images 
for spacing. 

♦ The code becomes complicated fast. Tables involve a lot of HTML markup. 
If the code involves tables nested inside each other, it's very difficult to 
remember which <td> element is related to which row of which table. 
Table-based layouts are very difficult to modify by hand. 

♦ Formatting is done cell by cell. A Web page could be composed of hun- 
dreds of table cells. Making a change in the font or color often involves 
making changes in hundreds of cells throughout the page. This makes 
your page less flexible and harder to update. 

♦ Presentation is tied tightly to data. A table-based layout tightly inter- 
twines the data and its presentation. This runs counter to a primary goal 
of Web design — separation of data from its presentation. 

♦ Table-based layouts are hard to change. After you create a layout 
based on tables, it's very difficult to make modifications because all the 
table cells have a potential effect on other cells. 

♦ Table-based layouts cause problems for screen readers. People with visual 
disabilities use special software to read Web pages. These screen readers 
are well-adapted to read tables as they were intended (to manage tabular 
data), but the screen readers have no way of knowing when the table is 
being used as a layout technique rather than a data presentation tool. This 
makes table-based layouts less compliant to accessibility standards. 



Resist the temptation to use tables for layout. Use tables to do what they're 
designed for: data presentation. Book III is entirely about how to use CSS to 
generate any kind of visual layout you might want. The CSS-based approaches 
are easier, more dependable, and much more flexible. 



Chapter 5: Making Connections 



In This Chapter 

Understanding hyperlinks 
v* Building the anchor tag 
V Recognizing absolute and relative links 
w Building internal links 

Creating lists of links 



7 he basic concept of the hyperlink is pretty common today, but it was a 
major breakthrough back in the day. The idea is still pretty phenomenal, 
if you think about it: If you click a certain piece of text (or a designated 
image, for that matter), your browser is instantly transported somewhere 
else. The new destination might be on the same computer as the initial 
page, or it could be literally anywhere in the world. 

Any page is theoretically a threshold to any other page, and all information 
has the ability to be linked. This is still a profound idea. In this chapter, you 
discover how to add links to your pages. 



The hyperlink is truly a wonderful thing. Believe it or not, there was a time 
when you had to manually type in the address of the Web page you wanted 
to go to. Not so anymore. Figure 5-1 illustrates a page that describes some of 
my favorite Web sites. 

In Figure 5-1, the underlined words are hyperlinks. Clicking a hyperlink takes 
you to the indicated Web site. Although this is undoubtedly familiar to you 
as a Web user, a few details are necessary to make this mechanism work: 

♦ Something must be linkable. There must be some text or other element 
that provides a trigger for the linking behavior. 

♦ Things that are links should look like links. This is actually pretty easy 
to do when you write plain XHTML because all links have a standard (if 
ugly) appearance. Links are usually underlined blue text. When you can 
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create color schemes, you may no longer want links to look like the 
default appearance, but they should still be recognizable as links. 




e browser needs to know where to go. When the user clicks the link, 
e browser is sent to some address somewhere on the Internet. 
Sometimes, that address is visible on the page, but it doesn't need to be. 

♦ It should be possible to integrate links into text. In this example, each 
link is part of a sentence. It should be possible to make some things act 
like links without necessarily standing on their own (like heading tags do). 

♦ The link's appearance sometimes changes. Links sometimes begin as 
blue underlined text, but after a link has been visited, the link is shown 
in purple, instead. After you know CSS, you can change this behavior. 

Of course, if your Web page mentions some other Web site, you should pro- 
vide a link to that other Web site. 



Figure 5-1: 

You can 
click the 
links to visit 
the other 
sites. 
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Some of my favorite sites 

Wikipedia 

One of my favorite websites is called -yvikipedia This terrific site allows ordinary users to enter encyclopedia definitions Over time, the entries can be as reliable as a 
commercial encyclopedia, and a lot more complete 

Dummies 

You can find out a lot about upcoming and current Dummies books at dummies com . You might ev en find this book mentioned there 

PoplRLS 

Web 2.0 is all about social networking If you want to know what's happening on the Internet today, check out popials.com . Tliis site aggregates a bunch of social 
networking sites. 
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Introducing the anchor tag 

|""N ["^ ^J1 e kev to hypertext is an oddly-named tag called the anchor tag. This tag is 

J |fj fj IJ fylwsKtin an <a></a> set of tags and contains all the information needed 
P"^ Ho marttge links between pages. 

The code for the basicLinks . html page is shown here: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>basicLinks .html</title> 
</head> 

<body> 

<hl>Some of my favorite sites</hl> 
<h2 >Wikipedia< /h2> 
<p> 

One of my favorite Web sites is called 
<a href = "http: //www.wikipedia.org">wikipedia. </a> 
This terrific site allows ordinary users to enter 
encyclopedia definitions. Over time, the entries 
can be as reliable as a commercial encyclopedia, 
and a lot more complete . 
</p> 

<h2>Dummies</h2> 
<p> 

You can find out a lot about upcoming and current 
Dummies books at <a href = "http://www.dummies.com"> 
www. dummies . com</a> . You might even find this 
book mentioned there. 
</p> 

<h2>PopURLS</h2> 
<p> 

Web 2.0 is all about social networking. If you want 
to know what's happening on the Internet today, 
check out <a href = "http://popurls.com"> 
popurls . com</a> . This site aggregates a bunch of 
social networking sites. 
</p> 
</ul> 
</body> 
</html> 

As you can see, the anchor tag is embedded into paragraphs. The text generally 
flows around an anchor, and you can see the anchor code is embedded inside 
the paragraphs. 
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Comparing block-level and inline elements 

the tags described so far in this book have been block-level tags. Block- 
vfi3ags typically begin and end with carriage returns. For example, three 
^H:ags occupy three lines. Each <p></p> set has implied space above 
and below it. Most XHTML tags are block-level. 

Some tags are meant to be embedded inside block-level tags and don't inter- 
rupt the flow of the text. The anchor tag is one such tag. Anchors never 
stand on their own in the HTML body. They're meant to be embedded inside 
block-level tags, like list items, paragraphs, and headings. 

Analyzing an anchor 

Take another look at the first link. It shows all the main parts of an anchor in 
a pretty straightforward way: 

<a href = "http: //www.wikipedia.org">wikipedia.</a> 

♦ The anchor tag itself: The anchor tag is simply the <a></a> pair. Note 
that you don't type the entire word anchor, just the a. 

♦ The hypertext reference (href) attribute: Almost all anchors contain 
this attribute. It's very rare to write <a without href. The href attrib- 
ute indicates a Web address will follow. 

♦ A Web address in quotes: The address that the browser will follow is 
encased in quotes. See the next section in this chapter for more informa- 
tion on Web addresses. In this example, http : / /www. wikipedia . org 
is the address. 

♦ The text that appears as a link: The user will typically expect to click 
specially formatted text. Any text that appears between the <a href > 
part and the </a> part is visible on the page and formatted as a link. In 
this example, the word wikipedia is the linked text. 

♦ The </a> marker: This marker indicates that the text link is finished. 

Introducing URLs 

The special link addresses are a very important part of the Web. You probably 
already type Web addresses into the address bar of your browser (www . 
google . com), but you may not be completely aware of how they work. Web 
addresses are technically URLs (Uniform Resource Locators), and they have 
a very specific format. 
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Sometimes, you'll see the term URI (Uniform Resource Identifier) instead of URL. 
URI is technically a more correct name for Web addresses, but the term URL 
^js|s^a^ht on. The two terms are close enough to be interchangeable. 

A URL usually contains the following parts: 

♦ Protocol: A Web protocol is a standardized agreement on how communi- 
cation occurs. The Web primarily uses HTTP (hypertext transfer protocol), 
but occasionally, you encounter others. Most addresses begin with 
http : / / because this is the standard on the Web. Protocols usually end 
with a colon and two slashes (://). 

♦ Host name: It's traditional to name your primary Web server www. 
There's no requirement for this, but it's common enough that users 
expect to type www right after the http : / / stuff. Regardless, the text 
right after http : / / (and up to the first period) is the name of the actual 
computer you're linking to. 

♦ Domain name: The last two or three characters indicate a particular 
type of Web server. These letters can indicate useful information about 
the type of organization that houses the page. Three-letter domains usu- 
ally indicate the type of organization, and two-letter domains indicate a 
country. Sometimes, you'll even see a combination of the two. See Table 
5-1 for a list of common domain names. 

♦ Subdomain: Everything between the host name (usually www) and the 
domain name (often . com) is the subdomain. This is used so that large 
organizations can have multiple servers on the same domain. For exam- 
ple, my department Web page is http : / /www . cs . iupui . edu. www is 
the name of the primary server, and this is the computer science depart- 
ment at IUPUI (Indiana University-Purdue University Indianapolis), 
which is an educational organization. 

♦ Page name: Sometimes, an address specifies a particular document on 
the Web. This page name follows the address and usually ends with 

. html. Sometimes, the page name includes subdirectories and user- 
name information, as well. For example, my Web design course is in the 
N241 directory of my (aharris) space at IUPUI, so its full address is 
http : / /www . cs . iupui . edu/ -aharris /n241 /index . html. 

♦ Username: Some Web servers are set up with multiple users. 
Sometimes, an address will indicate a specific user's account with a tilde 
(~) character. My address has -aharris in it to indicate the page is 
found in my (aharris) account on the machine. 

The page name is sometimes optional. Many servers have a special name 
set up as the default page, which appears if no other name is specified. 
This name is usually index . html but sometimes home . htm. On my 
server, index . html is the default name, so I usually just point to 

www. cs . iupui . edu/ -aharris /n2 41, and the index page appears. 



Book I 
Chapter 5 



IS ■ 



T. n =^ 
= a. a 

Vt 3 

IA 



81, Making Lists of Links 



DropBoo 



Table 5-1 


Common Domain Names 




Explanation 


rV^5 Non-profit institution 


. com 


Commercial enterprise 


. edu 


Educational institution 


. gov 


Governing body 


. ca 


Canada 


.uk 


United Kingdom 


. tv 


Tuvalu 



Making Lists of Links 

Many Web pages turn out to be lists of links. Because lists and links go so well 
together, it's good to look at an example. Figure 5-2 illustrates a list of links. 
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Some great web development sites 

♦ Fkefos The web developer's browser 

♦ aptana A really great editor 

♦ CSS zen garden A place to see amazing web designs 



Figure 5-2: 

It's very 
common to 
put links 
in a list. 
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There's no new code to figure out in this example, but the page shows some Book I 
interesting components: Chapter 5 



ist: An ordinary unordered list. 

♦ Links: Each list item contains a link. The link has a reference (which you S. ^ . 
can't see immediately) and linkable text (which is marked like an ordinary 
link). 

♦ Descriptive text: After each link is some ordinary text that describes the 
link. It's very common to write some text to accompany the actual link. 

This code shows the way this page is organized: 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>listLinks .html</title> 
</head> 



<body> 

<hl>Some great Web development sites</hl> 

<ul> 

<lixa href - "http://getfirefox.org"> 
Firef ox</a> 

The Web developer's browser</li> 
<lixa href = "http://www.aptana.org"> 
aptana</a> 

A really great editor</li> 
<lixa href = "csszengarden.com"> 
CSS zen garden</a> 

A place to see amazing Web designs</li> 

</ul> 
</body> 
</html> 



The indentation is interesting here. Each list item contains an anchor and 
some descriptive text. To keep it all organized, Web developers tend to place 
the anchor inside the list item. The address sometimes goes on a new line if 
it's long, with the anchor text on a new line and the description on succeed- 
ing lines. I normally put the <li> tag at the end of the last line, so the begin- 
ning <li> tags look like the bullets of an unordered list. This makes it easier 
to find your place when editing a list later. 



Working u/ith Absolute and Relative References 

There's more than one kind of address. So far, you've seen only absolute ref- 
erences, used for links to outside pages. There's another kind of reference — 
a relative reference — used to link multiple pages inside your own Web site. 
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Understanding absolute references 

pe of link used in basicLinks . html is an absolute reference. 



te references always begin with the protocol name (usually 
I /). An absolute reference is the complete address to a Web page, just 
like you'd use in the browser's address bar. Absolute references are used to 
refer to a site somewhere else on the Internet. Even if your Web site moves 
(say from your desktop machine to a Web server somewhere on the 
Internet), all the absolute references will work fine because they don't rely 
on the current page's position for any information. 



Introducing relative references 

Relative references are used when your Web site includes more than one 
page. You might choose to have several pages and a link mechanism for 
moving among them. Figure 5-3 shows a page with several links on it. 

The page isn't so interesting on its own, but it isn't meant to stand alone. 
When you click one of the links, you go to a brand-new page. Figure 5-4 
shows what happens when you click the market link. 
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These little 
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get 

around 
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Destinations of Porcine Mammals 

♦ This little pig went to market 

♦ This little pig stayed hoi'.e 

♦ This little pig had roast beef 

♦ This Me pig had none . 

♦ This little piz weal ■ ■ -.vee' all the way home. 
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Figure 5-4: 
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The market page is pretty simple, but it also contains a link back to the ini- 
tial page. Most Web sites aren't single pages at all, but an interconnected 
web of pages. The relative reference is very useful when you have a set of 
pages with interlacing links. 

The code for pigs .html shows how relative references work: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>pigs .html</title> 
</head> 

<body> 

<hl>Destinations of Porcine Mammals</hl> 
<ul> 

<li>This little pig went to 

<a href = "market. html i1 >market</a></li> 
<li>This little pig stayed 

<a href = "home .html">home</a> . </li> 
<li>This little pig had 

<a href = "roastBeef .html ">roast beef</a></li> 
<li>This little pig had 

<a href = "none .html">none</a> . </li> 
<li>This little pig went 

<a href = "wee .html"> 1 wee wee wee'</a> 
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all the way home.</li> 

</ul> 
</body> 



Most of the code is completely familiar. The only thing surprising is what's 
not there. Take a closer look at one of the links: 



<a href = "market. html " >home</a> . </li> 



Note there's no protocol (the http : / / part) and no address at all, just a file- 
name. This is a relative reference. Relative references work by assuming the 
address of the current page. When the user clicks market . html, the 
browser sees no protocol, so it assumes that market . html is in the same 
directory on the same server as pigs . html. 

Relative references work like directions. For example, if you're in my lab and 
ask where the water fountain is, I'd say, "Go out into the hallway, turn left, and 
turn left again at the end of the next hallway." Those directions get you to the 
water fountain if you start in the right place. If you're someplace else and you 
follow the same directions, you don't really know where you'll end up. 

Relative references work well when you have a bunch of interconnected Web 
pages. If you make a lot of pages about the same topic and put them in the 
same directory, you can use relative references between the pages. If you 
decide to move your pages to another server, all the links still work correctly. 

In Book VIII, you discover how to set up a permanent Web server. It's often 
most convenient to create and modify your pages on the local machine and 
then ship them to the Web server for the world to see. If you use relative ref- 
erences, it's easy to move a group of pages together and know the links will 
still work. 



If you're referring to a page on somebody else's site, you have to use an 
absolute reference. If you're linking to another page on your site, you typi- 
cally use a relative reference. 
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In This Chapter 

V Understanding the main uses of images 

V Choosing an image format 
C* Creating inline images 

W Using IrfanView and other image software 
Changing image sizes 
Modifying images with filters 

\J ou have the basics of text, but pages without images are . . . well, a little 

boring. Pictures do a lot for a Web page, and they're not that hard to work 
with. Still, you should know some things about using pictures in your pages. In 
this chapter, you get all the fundamentals of adding images to your pages. 

Adding Images to \lour Pages 

Every time you explore the Web, you're bound to run into tons of pictures 
on just about every page you visit. Images are typically used in four different 
ways on Web pages: 

♦ External link: The page has text with a link embedded in it. When the 
user clicks the link, the image replaces the page in the Web browser. To 
make an externally linked image, just make an ordinary link (as I describe 
in Chapter 5 of this minibook) but point toward an image file, rather 
than an HTML (HyperText Markup Language) file. 

♦ Embedded images: The image is embedded into the page directly The 
text of the page usually flows around the image. This is the most common 
type of image used on the Web. 

♦ Background images: An image can be used as a background for the 
entire page or for a specific part of the page. Images usually require 
some special manipulation to make them suitable for background use. 

♦ Custom bullets: With CSS, you can assign a small image to be a bullet 
for an ordered or unordered list. This allows you to make any kind of 
customized list markers you can draw. 



00 Adding Images to your Pages 



The techniques you read about in this chapter apply to all type of images, 
but a couple of specific applications (such as backgrounds and bullets) use 
or details on using images in CSS, see Book II, Chapter 4. 
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The easiest way to incorporate images is to simply make a link to them. 
Figure 6-1 shows a page called externallmage.html. 

The page's code isn't much more than a simple link: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>externallmage . html</ title> 
</head> 



<body> 

<hl>Linking to an External Image</hl> 
<p> 

<a href = "shipStandard. jpg"> 

Susan B. Constant 
</a> 
</p> 
</body> 
</html> 



Note that the href points to an image file, not an HTML page. You can point 
to any type of file you want in an anchor tag. If the browser knows the file type 
(for example, HTML and standard image formats), the browser displays the 
file directly. If the browser doesn't know the file format, the user's computer 
tries to display the file using whatever program it normally uses to open that 




See Chapter 5 of this minibook for a discussion of anchor tags if you need a 
refresher. 



This works fine for most images because the image is displayed directly in 
the browser. 




You can use this anchor trick with any kind of file, but the results can be very 
unpredictable. If you use the link trick to point to some odd file format, there's 
no guarantee the user has the appropriate software to view it. It's generally best 
to save this trick for very common formats, like GIF and JPG. (If these formats 
are unfamiliar to you, they are described later in this chapter.) 
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Figure 6-1: 

This page 
has a link to 
an image. 



- "I 



History Bookmarks Tools Help 



■ ^ |_^f |u fMe7;/C:^rogram%20Files/xamro^ 



sera: 



to an External Image 





© 4) No-, :Sunny,65=F Sat: 30 


F =V) | Sun:81'F \j£> 


start 




] ^corsa.r.cs.iupu,.. f 4Jeship.jpg -irfe... } 


* - Stf* 10:23 AM 



Book I 
Chapter 6 



Note that most browsers automatically resize the image to fit the browser 
size. This means a large image may appear to be smaller than it really is, but 
the user still has to wait for the entire image to download. 

Because this is a relative reference, the indicated image must be in the same 
directory as the HTML file. When the user clicks the link, the page is 
replaced by the image, as shown in Figure 6-2. 

External links are easy to create, but they have some problems: 

♦ They don't preview the image. The user has only the text description to 
figure out what the picture might be. 

♦ They interrupt the flow. If the page contains a series of images, the user 
has to keep leaving the page to view images. 

♦ The user must back up to return to the main page. The image looks like 
a Web page, but it isn't. No links or other explanatory text in the image 
indicate how to get back to the Web page. Most users know to click the 
browser's Back button, but don't assume they all know what to do. 
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Adding in tine images using the <img> tag 

The alternative to providing links to images is to embed your images directly 
into the page. Figure 6-3 displays an example of this technique. 

The code shows how this image was included into the page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>embeddedlmage .html</ title> 
</head> 

<body> 

<hl>The Susan B. Constant</hl> 
<p> 

<img src = "shipStandard.jpg" 
height = "480" 
width = "640" 

alt = "Susan B. Constant" /> 

</p> 
<P> 
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The <em>Susan B. Constant</em> was flagship of the fleet of three Book I 

small ships that brought settlers to Jamestown, the first successful 
English Colony in the new world. This is a replica housed 
P^ar Jamestown, Virginia. 
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The image (img) tag is the star of this page. This tag allows you to grab an 3 
image file and incorporate it into the page directly. The image tag is a one- <g 
shot tag. It doesn't end with </img>. Instead, use the /> characters at the w 
end of the img definition to indicate that this tag doesn't have content. 




You might have noticed that I italicized Susan B. Constant in the page, and I 
used the <em> tag to get this effect. <em> stands for emphasis, and <strong> 
means strong emphasis. By default, any text within an <em></em> pair is itali- 
cized, and <strong></strong> text is boldfaced. Of course, you can change 
this behavior with CSS. 



The image tag has a number of important attributes, which I discuss in the 
following sections. 
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src (source) 

■The src attribute allows you to indicate the URL (Uniform Resource 
Hrf)<^pr) of the image. This can be an absolute or relative reference. Linking 
»tc^a^mage on your own system is generally best because you can't be sure 
an external image will still be there when the user gets to the page. (For 
more on reference types, turn to Chapter 5 of this minibook.) 



height and itfidth 

These attributes are used to indicate the size of the image. The browser uses 
this information to indicate how much space to reserve on the page. 



-AVNG. 




It's tempting to use the height and width attributes to change the size of 
the image on the Web page — this is a bad idea. Change the image size with 
your image editor (I show you how later in this chapter). If you use the height 
and width attributes, the user has to wait for the full image, even if she'll see a 
smaller version. Don't make the user wait for information she won't see. If you 
use these attributes to make the image larger than its default size, the resulting 
image has poor resolution. Find the image's actual size by looking at it in 
your image tool and use these values. If you leave out height and width, 
the browser determines the size automatically, but you aren't guaranteed to 
see the text until all the images have downloaded. Adding these attributes lets 
the browser format the page without waiting for the images. 



ait (alternate text) 

The alt attribute gives you an opportunity to specify alternate text describ- 
ing the image. Alternate text information is used when the user has images 
turned off and by screen readers. Internet Explorer (IE) automatically cre- 
ates a ToolTip (floating text) based on the alternate text. 

You can actually add a floating ToolTip to any element using the title 
attribute. This works in all standards-compliant browsers, with nearly any 
HTML element. 




Keep in mind, the alt attribute is required on all images if you want to vali- 
date XHTML Strict. 



Note that the <img> tag is an inline tag, so it needs to be embedded inside a 
block-level tag, like a <p> or <li>. 



Choosing an Image Manipulation Toot 

You can't just grab any old picture off your digital camera and expect it to work 
on a Web page. The picture might work, but it could cause problems for your 
viewers. It's important to understand a few important ideas about images on 
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the computer. Digital images (any kind of images you see on a computer or Book I 

similar device) are different than the kind of images you see on paper. Chapter 6 



] aqe is Worth mittion Words! 

Digital cameras and scanners are amazing these days. Even moderately priced 
cameras can now approach the resolution of old-school analog cameras. 
Scanners are also capable of taking traditional images and converting them 
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into digital formats that computers use. In both cases, though, the default g 
image can be in a format that causes problems. Digital images are stored as a 
series of dots, or pixels. In print, the dots are very close together, but com- 
puter screens have larger dots. Figure 6-4 shows the ship image as it looks 
straight from the digital camera. 

My camera handles pictures at 6 megapixels (MP). That's a pretty good reso- 
lution, and it sounds very good in the electronics store. If I print that picture 
on paper, all those dots are very tiny, and I get a nice picture. If I try to show 
the same picture on the computer screen, I see only one corner. This actual 
picture came out at 2,816 pixels wide by 2,1 12 pixels tall. You only see a small 
corner of the image because the screen shots for this book are taken at 
1024 x 768 pixels. Less than a quarter of the image is visible. 
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When you look at a large image in most browsers, it's automatically resized 
to fit the page. The cursor usually turns into some kind of magnifying glass, 
you click the image, you can see it in its full size or the smaller size. 




Some image viewers take very large images and automatically resize them so 
they fit the screen. (This is the default behavior of Windows' default image 
viewer and most browsers.) The image may appear to be a reasonable size 
because of this feature, but it'll be huge and difficult to download in an actual 
Web page. Make sure you know the actual size of an image before you use it. 

It's obvious that you need to shrink an image so it's all visible, but there's an 
even more compelling reason. Each pixel on the screen requires three bytes 
of computer memory. (A byte is the basic unit of memory in a computer.) For 
comparison purposes, one character of text requires roughly one byte. The 
uncompressed image of the ship weighs a whopping 17 megabytes (MB). If 
you think of a word as five characters long, one picture straight from the dig- 
ital camera takes up the same amount of storage space and transmission 
time as roughly 3,400,000 words. This image requires nearly three minutes to 
download on a 56K modem! 

In a Web page, small images are often shown at about 320 x 240 pixels, and 
larger images are often 640 x 480 pixels. If I use software to resample the image 
to the size I actually need and use an appropriate compression algorithm, I 
can get the image to look like Figure 6-5. 
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as good, and it weighs a much more reasonable 88 kilobytes. That's 2 per- Chapter 6 

^y|i^c^^ie original image size. 

Although this picture is a lot smaller than the original image, it still takes up |[ 

a lot more memory than text. Even this smaller image takes up as much 5' 

transmission time and storage space as 1,600 words! It still takes 10 seconds — 

to download on a 56K modem. Use images wisely. a» 
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Images are great, but keep some things in mind when you use them: 



♦ Make sure the images are worth displaying. Don't use a picture without 
some good reason because each picture makes your page dramatically 
slower to access. 

♦ Use software to resize your image. Later in this chapter, I show you how 
to use free software to change the image to exactly the size you need. 

♦ Use a compressed format. Images are almost never used in their native 
format on the Web because they're just too large. Several formats have 
emerged that are useful for working with various types of images. I 
describe these formats in the section "Choosing an Image Format," later 
in this chapter. 



If you're curious how I determined the download speed of these images, it's 
pretty easy. The Web Developer toolbar (which I mention in Chapter 3 of this 
minibook) has a View Speed Report option on the Tools menu that does the 
job for you. 



Introducing IrfanVieW 

IrfanView, by Irfan Skiljan, is a freeware program that can handle your basic 
image manipulation needs and quite a bit more. I used it for all the screen- 
shots in this book, and I use it as my primary image viewer. A copy is included 
on the CD-ROM that accompanies this book, or you can get a copy at www. 
ir f anview . net. Of course, you can use any software you want, but if some- 
thing's really good and free, it's a great place to start. In the rest of this chap- 
ter, I show you how to do all the main image processing jobs with IrfanView, 
but you can use any image editor you want. 

A Web developer needs to have an image manipulation program to help with 
all these chores. Like other Web development tools, you can pay quite a bit 
for an image manipulation tool, but you don't have to. Your image tool 
should have at least the following capabilities: 

♦ Resizing: Web pages require smaller images than printing on paper. You 
need a tool that allows you to resize your image to a specific size for 
Web display. 
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Saving to different formats: There's a dizzying number of image formats 
available, but only three formats work reliably on the Web (which I dis- 
ss in the next section). You need a tool that can take images in a wide 
riety of formats and reliably switch it to a Web-friendly format. 



♦ Cropping: You may want only a small part of the original picture. A crop- 
ping tool allows you to extract a rectangular region from an image. 

♦ Filters: You may find it necessary to modify your image in some way. You 
may want to reduce red-eye, lighten or darken your image, or adjust the 
colors. Sometimes, images can be improved with sharpen or blur filters, 
or more artistic filters like canvas or oil-painting tools. 

♦ Batch processing: You may have a number of images you want to work 
with at once. A batch processing utility can perform an operation on a 
large number of images at once, as you see later in this chapter. 

You may want some other capabilities, too, such as the ability to make 
composite images, images with transparency, and more powerful effects. You 
can use commercial tools or the excellent open-source program Gimp, which 
is included on the CD-ROM. This chapter focuses on IrfanView because it's 
simpler, but investigate Gimp (or its cousin GimpShop, for people used to 
Photoshop) for a more complete and even more powerful tool. I use IrfanView 
for basic processing, and I use Gimp when I need a little more power. 

Here are a few free alternatives if you want some other great software to try: 

♦ XnView: Similar to IrfanView, allows you to preview and modify pictures 
in hundreds of formats, create thumbnails, and more. 

♦ Pixia: A full-blown graphic editor from Japan. Very powerful. 

♦ GimpShop: A version of Gimp modified to have menus like Photoshop. 

♦ Paint.net: A powerful Windows-only paint program. 

Use Google or another search engine to locate any of these programs. 
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Almost nobody uses raw images on the Web because they're just too big and 
unwieldy. Web images are usually compressed to take up less space. All the 
different types of image files you see in the computer world (BMP, JPG, GIF, 
and so on) are essentially different ways to make an image file smaller. Not 
all the formats work on the Web, and they have different characteristics, so 
it's good to know a little more about them. 
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BMP 

Tile BMP format is Microsoft's standard image format. Although it's compressed 
IJ*tel£2es, usually it isn't. The BMP format creates very detailed images 
^wilhiftne to no compression, and the file is often too large to use on the 

Web. Many Web browsers can handle BMP images, but you shouldn't use 

them. Convert to one of the other formats, instead. 

JPG/JPEG 

The JPG format (sometimes also called JPEG) is a relatively old format 
designed by the Joint Photographic Experts Group. (Get it? JPEG!) It works 
by throwing away data that's less important to human perception. Every 
time you save an image in the JPG format, you lose a little information. This 
sounds terrible, but it really isn't. The same image that came up as 13MB in 
its raw format is squeezed down to 1.5MB when stored as a JPG. Most people 
can't tell the difference between the compressed and non-compressed version 
of the image by looking at them. 

The JPG algorithm focuses on the parts of the image that are important to 
perception (brightness and contrast, for example) and throws away data 
that isn't as important (much of the color data is actually thrown away, but 
the colors are re-created in an elaborate optical illusion). 

JPG works best on photographic-style images with a lot of color and detail. 
Many digital cameras save images directly as JPGs. 

One part of the JPG process allows you to determine the amount of compres- 
sion. When you save an image as a JPG, you can often determine the quality 
on a scale between accuracy and compression. 

Even if you choose 100-percent accuracy, the file is still greatly compressed. 
The adjustable compression operates only on a small part of the process. 
Compressing the file too much can cause visible square shadows, or arti- 
facts. Experiment with your images to see how much compression they can 
take and still look like the original. 

Keep a high-quality original around when you're making JPG versions of an 
image because each copy loses some detail. If you make a JPG from a JPG 
that came from another JPG, the loss of detail starts to add up, and the pic- 
ture loses some visual quality. 

GIF 

The GIF format was developed originally for CompuServe, way before the 
Web was invented. This format was a breakthrough in its time, and it still has 
some great characteristics. 
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GIF is a lossless algorithm, so potentially no data is lost when converting an 
image to GIF (compare that to the lossy JPG format). GIF does its magic with 
palette trick and a run-length encoding trick. 



The color palette works like a paint-by-number set where an image has a 
series of numbers printed on it, and each of the paint colors has a corre- 
sponding number. What happens in a GIF image is similar. GIF images have a 
list of 256 colors, automatically chosen from the image. Each of the colors is 
given a number. A raw (uncompressed) image requires 3 bytes of informa- 
tion for each pixel (1 each to determine the amount of red, green, and blue). 
In a GIF image, all that information is stored one time in the color palette. 
The image itself contains a bunch of references to the color palette. 



For example, if blue is stored as color 1 in the palette, a strip of blue might 
look like this: 



1, 1, 1, 1, 1, 1, 1, 1, 1, 1 



GIF uses its other trick — run-length encoding — when it sees a list of identi- 
cal colors. Rather than store the above value as 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, the 
GIF format can specify a list of 10 ones. That's the general idea of run-length 
encoding. The ship image in this example weighs 2.92MB as a full-size GIF image. 

The GIF format works best for images with a relatively small number of 
colors and large areas of the same color. Most drawings you make in a draw- 
ing program convert very well to the GIF format. Photos aren't ideal because 
they usually have more than 256 colors in them, and the subtle changes in 
color mean there are very few solid blotches of color to take advantage of 
run-length encoding. 

GIF does have a couple of really great advantages that keep it popular. First, 
a GIF image can have a transparent color defined. Typically, you'll choose 
some awful color not found in nature (kind of like choosing bridesmaid 
dresses) to be the transparent color. Then, when the GIF encounters a pixel 
that color, it displays whatever is underneath instead. This is a crude but 
effective form of transparency. Figure 6-6 shows an image with transparency. 

Whenever you see an image on a Web page that doesn't appear to be rectan- 
gular, there's a good chance the image is a GIF. The image is still a rectangle, 
but it has transparency to make it look more organic. Typically, whatever 
color you set as the background color when you save a GIF becomes the 
transparent color. 

Creating a complex transparent background, like the statue, requires a more 
complex tool than IrfanView. I used Gimp, but any high-end graphics tool can 
do the job. IrfanView is more suited to operations that work on the entire image. 
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Figure 6-6: 

This statue 
is a GIF 
with trans- 
parency. 



- - .'I 



Bookmarks Toots Help 



€^ Jj l-^f I ' fi| e^■V'C::°'oc^a^- 0 ViOFlles'^amDP,*tdocs^ft/>lftll,6/statue.glf 




r 



Now: Sunny. 80° F Varv.Zl c P Tue:S6°F g> 

tgny-2.2 5H7PN 



Another interesting feature of GIF is the ability to create animations. Animated 
GIFs are a series of images stored in the same file. You can embed information, 
determining the interval between images. You can create animated GIFs with 
Gimp, which is included on the CD-ROM. 

Animated GIFs were heavily over-used in the early days of the Web, and 
many now consider them the mark of an amateur. Nobody really thinks that 
animated mailbox is cute anymore. 




For awhile, there were some legal encumbrances regarding a part of the GIF 
scheme. The owners of this algorithm tried to impose a license fee. This was 
passed on to people using commercial software but became a big problem 
for free software creators. 



Fortunately, it appears that the legal complications have been resolved for 
now. Still, you'll see a lot of open-software advocates avoiding the GIF algo- 
rithm altogether because of this problem. 
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PNG 

ODen-source software advocates created a new image format that combines 
rCof the best features of both JPG and GIF, with no legal problems. The 
Golfing format is Portable Network Graphics, or PNG. This format has a 
number of interesting features, such as 

♦ Lossless compression: Like GIF, PNG stores data without losing any 
information. 

♦ Dynamic color palette: PNG supports as many colors as you want. You 
aren't limited to 256 colors like you are in GIF. 

♦ No software patents: The underlying technology of PNG is completely 
open source, with no worries about whether somebody will try to 
enforce a copyright down the road. 

♦ True alpha transparency: The PNG format has a more sophisticated 
form of transparency than GIF. Each pixel can be stored with an alpha 
value. Alpha refers to the amount of transparency. The alpha can be 
adjusted from completely transparent to completely opaque. 

With all its advantages, you might expect PNG to be the most popular image 
format on the Web. Surprisingly, it's been slow to catch on. The main reason 
for this is spotty support for PNG in Internet Explorer (IE). Even the latest 
version of IE doesn't support PNG's alpha transparency correctly. 

Summary of Web imaqe formats 

All these formats may seem overwhelming, but it's pretty easy to choose an 
image format because each format has its own advantages and disadvantages: 

♦ GIF is best when you need transparency or animation. Avoid using GIF on 
photos, as you won't get optimal compression, and you'll lose color data. 

♦ JPG is most useful for photographic images, which are best suited for 
the JPG compression technique. However, keep in mind that JPG isn't 
suitable for images that require transparency. Text in JPG images tends 
to become difficult to read because of the lossy compression technique. 

♦ PNG is useful in most situations, but be aware that IE doesn't handle 
PNG transparency correctly. (You sometimes see strange color blotches 
where you expect transparency.) 

♦ BMP and other formats should be avoided entirely. Although you can 
make other formats work in certain circumstances, there's no good 
reason to use any other image formats most of the time. 
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oming soon — vector formats 



Here's another form of image format that will 
hopefully gain more prominence in the future. 
All the formats described so far are raster- 
based Image formats. This type of image stores 
an image as a series of dots. Vector-based 
image formats use formulas to store the 
instructions to draw an image. Certain kinds of 
images (especially charts and basic line art) 



can be far more efficient when stored as vector 
formats. Unfortunately, IE and Firefox support 
different and incompatible vector formats, so it 
doesn't look like vector-based images will be a 
factor soon. Flash also uses vector-based tech- 
niques, but this technique requires expensive 
proprietary software to create vector images 
and a third-party plugin to use them. 
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All this talk of compression algorithms and resizing images may be dandy, 
but how do you do it? 

Fortunately, IrfanView can do nearly anything you need for free. IrfanView 
has nice features for all the main types of image manipulation you need. 

Changing formats in hfanVieu) 

Changing image formats with IrfanView is really easy. For example, find an 
image file on your computer and follow these steps: 

/. Load the image into IrfanView by dragging the image into IrfanView 
or using the menu FileOOpen command. 

2. Make any changes you may want to the image before saving. 

3. Use the FileOSave As command to save the file. 

4. Pick the image format from the Save Picture As dialog box, as shown 
in Figure 6-7. 

5. Save the file with a new filename. 

Keep the original file and save any changes in a new file. That way, you 
don't overwrite the original file. This is especially important if you're 
converting to JPG because each successive save of a JPG causes some 
image loss. 
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% shlpStandardJpg IrfanView (Zoom: 840 x 630) 
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Save Picture As . 



Figure 6-7 
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Don't use spaces in your filenames. Your files may move to other computers 
on the Internet, and some computers have trouble with spaces. It's best to 
avoid spaces and punctuation (except the underscore character) on any files 
that will be used on the Internet. 

Resizing your images 

All the other image-manipulation tricks may be optional, but you should 
really resize your images. Although high-speed modems may have no trouble 
with a huge image, nothing makes a Web page inaccessible to dialup users 
faster than bloated image sizes. 

To resize an image with IrfanView, perform the following steps: 

/. Load the image into IrfanView. 

You can do this by dragging the image onto the IrfanView icon, dragging 
into an open instance of IrfanView, or using the menus within IrfanView. 

2. From the Image menu, choose Resize/Resample. 

You can also use Ctrl+R for this step. Figure 6-8 shows the resulting 
dialog box. 
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3. Determine the new image size. 

A number of standard image sizes are available. 800 x 600 pixels will 
create a large image in most browsers. If you want the image smaller, 
you need to enter a size directly in the text boxes. Images embedded in 
Web pages are often 320 pixels wide by 240 pixels tall. That's a very 
good starting point. Anything smaller will be hard to see, and anything 
larger might take up too much screen space. 

4. Preserve the aspect ratio using the provided check box. 

This makes sure the ratio between height and width is maintained. 
Otherwise, the image may be distorted. 

5. Save the resulting image as a new file. 

When you make an image smaller, you lose data. That's perfectly fine for 
the version you put on the Web, but you should hang on to the original 
large image in case you want to resize again. 

6. Resample, rather than resize. 

Resampling is a slower but more accurate technique for changing the 
image size. This is Irfan View's default behavior, so leave it alone. It's still 
quite fast on a modern computer. The default (Lanczos) filter is fine, 
although you can experiment with other filters to get a faster conversion, 
if you want. 
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Enhancing image cotors 

|""N ["^ [Sometimes, you can make improvements to an image by modifying the 

J \ Cj fj f| fj fj TOlo^. The Enhance Colors dialog box on the Images menu gives you a wide 




of options, as shown in Figure 6-9. 

You can do a surprising number of helpful operations on an image with this 
tool: 

♦ Brightness: When adjusted to a higher value, the image becomes closer 
to white. When adjusted to a negative value, the image becomes closer 
to black. This is useful when you want to make an image lighter or 
darker for use as a background image. 

If your image is too dark or too bright, you may be tempted to use the 
Brightness feature to fix it. The Gamma Correction feature described 
later in this section is more useful for this task. 

♦ Contrast: You usually use the Contrast feature in conjunction with the 
Brightness feature to adjust an image. Sometimes, an image can be 
improved with small amounts of contrast adjustments. 
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Color Balance: Sometimes, an image has poor color balance (for example, Book I 
indoor lighting sometimes creates a bluish cast). You can adjust the Chapter 6 

unt of red, green, and blue with a series of sliders. The easiest way 
nage color balance is to look at a part of the image that's supposed 
to be white and play with the slider until it looks truly white. a 

♦ Gamma Correction: This is used to correct an image that is too dark or <n 
too light. Unlike the Brightness adjustment, Gamma Correction automati- 3 
cally adjusts the contrast. Small adjustments to this slider can sometimes <g 
fix images that are a little too dark or too light. w 

♦ Saturation: When saturation is at its smallest value, the image becomes 
black and white. At its largest value, the colors are enhanced. Use this 
control to create a grayscale image or to enhance colors for artistic effect. 



Usinq built-in effects 

IrfanView has a few other effects available that can sometimes be extremely 
useful. These effects can be found individually on the Image menu or with 
the Effects browser on the Image menu. The Effects browser (as shown in 
Figure 6-10) is often a better choice because it gives you a little more control 
of most effects and provides interactive feedback on what the effect will do. 
Effects are sometimes called filters because they pass the original image 
through a math function, which acts like a filter or processor to create the 
modified output. 
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Here's a run-down of some of the effects and when you would use them: 
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pne: Just for comparison purposes, Figure 6-1 1 shows the ship image 
th no filters turned on. 




I've exaggerated the effects for illustration purposes, but it may still be 
difficult to see the full effect of these filters on the printed page. The 
grayscale images in this book are a poor representation of the actual 
color images. Use the images in this chapter as a starting point, but to 
understand these filters, you really need to experiment with your own 
images in IrfanView or a similar tool. 

Blur: This filter reduces contrast between adjacent pixels. (Really, we 
could go over the math, but let's leave that for another day, huh?) You 
might wonder why you'd make an image more blurry on purpose. 
Sometimes, the blur filter can fix graininess in an image. You can also 
use blur in conjunction with sharpen (which I cover in just a moment) to 
fix small flaws in an image. I applied the blur filter to the standard ship 
image in Figure 6-12. 

Sharpen: The opposite of blur, the sharpen filter enhances the contrast 
between adjacent pixels. When used carefully, it can sometimes improve 
an image. The sharpen filter is most effective in conjunction with the 
blur filter to remove small artifacts. Figure 6-13 shows the ship image 
with the sharpen filter applied. 



Figure 6-11: 

Here's the 
standard 
ship image, 
at full- 
screen 
resolution. 
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If you believe crime shows on TV, you can take a blurry image and keep 
applying a sharpen filter to read a license plate on a blurry image from a 

Scurity camera. However, it just doesn't usually work that way. You 
n't make detail emerge from junk, but sometimes, you can make small 
improvements. 

Emboss: This filter creates a grayscale image that looks like embossed 
metal, as shown in Figure 6-14. Sometimes, embossing can convert an 
image into a useful background image because embossed images have 
low contrast. You can use the Enhance Colors dialog box to change the 
gray embossed image to a more appealing color. 

Oil paint: This filter applies a texture reminiscent of an oil painting to an 
image, as shown in Figure 6-15. It can sometimes clean up a picture and 
give it a more artistic appearance. The higher settings make the painting 
more abstract. 

3D button: This feature can be used to create an image, like Figure 6-16, 
that appears to be a button sticking up from the page. This will be useful 
later when you figure out how to use CSS or JavaScript to swap images for 
virtual buttons. You can set the apparent height of the image in the filter. 
Normally, you apply this filter to smaller images that you intend to make 
into buttons the user can click. 



Figure 6-14: 

Embossing 
creates a 
low- 
contrast 3D 
effect. 
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♦ Red-eye reduction: You use this filter to fix a common problem with 
flash photography. Sometimes, a person's eyes appear to have a reddish 
ge to them. Unlike the other filters, this one is easiest to access directly 
m the Image menu. Use the mouse to select the red portion of the 
image and then apply the filter to turn the red areas black. It's best not 
to perform this filter on the entire image because you may inadvertently 
turn other red things to black. 



Other effects you can use 

Many more effects and filters are available. IrfanView has a few more built in 
that you can experiment with. You can also download a huge number of 
effects in the Adobe Photoshop 8BF format. These effects filters can often be 
used directly in IrfanView and other image-manipulation programs. 

Some effects allow you to explode the image, add sparkles, map images onto 
3D shapes, create old-time sepia effects, and much more. 

If you want to do even more image manipulation, consider a full-blown image 
editor. Adobe Photoshop is the industry standard, but Gimp is an open- 
source alternative (included on the CD-ROM) that does almost as much. 



Batch pYocessinq 

Often, you'll have a lot of images to modify at once. IrfanView has a wonder- 
ful batch-processing tool that allows you to work on several images at once. I 
frequently use this tool to take all the images I want to use on a page and 
convert them to a particular size and format. The process seems a little com- 
plicated, but after you get used to it, you can quickly and easily modify a 
large number of images at once. 

If you want to convert a large number of images at the same time, follow 
these steps: 

/. Identify the original images and place them in one directory. 

I find it easiest to gather all the images into one directory, whether they 
come from a digital camera, scanner, or other device. 

2. Open the Batch Conversion dialog box by choosing FileOBatch 
Conversion — Rename. 

This Batch Conversion dialog box looks like Figure 6-17. 

3. Find your original images by navigating the directory window in the 
Batch Conversion dialog box. 
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Conversion options 



if. Copy your images to the Input Files workspace by clicking the Add 
button. 

Select the images you want to modify and press the Add button. 
The selected image names are copied to the Input Files workspace. 

5. Specify the output directory. 

If you want to put the new images in the same directory as the input 
files, click the Use This Directory as Output button. If not, choose the 
directory where you want the output images to go. 

6. In the Work As box, choose Batch Conversion — Rename Result Files. 

You can use this setting to rename your files, to do other conversions, or 
both. I generally recommend both. 

7. Set the output format to the format you want. 

For photos, you probably want JPG format. 
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8. Change renaming settings in the Batch Rename Settings area if you 
want to specify some other naming convention for your images. 

default, each image is called image### where ### is a three digit 
mimber. They are numbered according to the listing in the Input Files 
dialog box. You can use the Move Up and Move Down buttons to change 
the order images appear in this listing. 

9. Click the Set Advanced Options button to change the image size. 

This displays the Settings For All Images dialog box, as shown in Figure 6-18. 

10. Specify the new size of the image in the Resize area. 

Several common sizes are preset. If you want another size, use the given 
options. I set my size to 320 x 240. 

/ /. Close the Settings For All Images dialog box and then, back in the 
Batch Conversion dialog box, press the Start button. 

In a few seconds, all the new images will be automatically created. 
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es, you'll want to use images as links. For example, take a look at 
!html, as shown in Figure 6-19. 



This page uses a technique — thumbnail images. A thumbnail is a small ver- 
sion of the full-size image. The thumbnail is embedded directly. The user can 
click it to see the full-size version in the browser. 

Thumbnails are good because they allow the user to preview a small version 
of each image without having to wait for the full-size versions to be rendered 
on-screen. If the user wants to see a complete image, he can click the thumb- 
nail to view it on its own page. 
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Figure 6-19: 
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images. 
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Creating thumbnail images 

hujnbnails are simply scaled-down versions of ordinary images. Because 
'ocess is fairly common, IrfanView comes with a wonderful tool to 
iate thumbnail creation. To make a batch of thumbnails in IrfanView 

/. Organize your images. 

Any page that has a large number of images can get confusing. I prefer to 
organize everything that will be used by a particular page into its own 
directory. I created a directory, thumbs, that will contain thumbs .html, 
all the full-size images, and all the thumbnails. I usually don't find it help- 
ful to have separate directories for images. It's more helpful to organize 
by project or page than by media type. 

2. Rename images, if necessary. 

Images that come from a digital camera or scanner often have cryptic 
names. Your life is a lot easier if your image names are easier to under- 
stand. I named my images ship_l . jpg, ship_2 . jpg, and ship_3 . jpg. 

3. Make any changes you want to the originals before you make the 
thumbnails. 

Use the tips described in this chapter to clean up or improve your 
images before you make thumbnails, or the thumbnails won't represent 
the actual images accurately. 

It. Open the IrfanView Thumbnails tool by choosing FileOThumbnails or 
by pressing the T key. 

The Thumbnails tool looks like Figure 6-20. 

5. Select the thumbnails you want to create. 

Use the mouse to select any images you want to make thumbnails from. 

6. Choose Save Selected Thumbs as Individual Images from the File menu. 

There are other options, but this gives the behavior you want. The other 
options create automatic contact sheets, open the batch editor, or create 
slide shows. These are great things, but for now, you want thumbnails. 

7. Specify the output directory. 

You can put the thumbnails in the same directory as the originals. The 
thumbnails have the same name as the originals, but the filenames end 
with _t. 

8. Review the new thumbnail images. 

You should see a new set of smaller images (default size is 80 x 80 
pixels) in the directory. 
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Figure 6-20: 
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Creating a thumbnail-based image directory 

Now, you have everything you need to build a page like thumbs .html. 
Here's an overview of the code: 



<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>thumbs .html</title> 

</head> 

<body> 

<hl>Images of the <em>Susan B. Constant</emx/hl> 
<ul> 
<li> 

<h2>The Stern</h2> 
<a href = " ship_l . jpg"> 
<img src = "ship_l_t.jpg" 

height = "80" 

width = "80" 

alt = "ship 1" /> 

</a> 
</li> 



<li> 
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<h2>The Mast</h2> 
<a href = " ship_2 . jpg"> 
<img src = "ship_2_t.jpg" 
height = "80" 
width = "80" 
alt = "ship 2" /> 
</a> 
</li> 



<li> 

<h2>The Rigging</h2> 
<a href = " ship_3 . jpg"> 
<img src = "ship_3_t.jpg" 
height = "80" 
width = "80" 
alt = "ship 3" /> 

</a> 
</li> 
</ul> 
</body> 
</html> 



This code looks complicated, but it's really just a combination of techniques 
described in this chapter. Look over the code and use the indentation to 
determine the structure. 

The page is an unordered list. Each list item contains an H2 headline and an 
anchor. The anchor contains an image, rather than text. When you include 
an image inside an anchor tag, it's outlined in blue. 

The key is to use the thumbnails as inline images inside the page, and the full- 
size image as the href of the anchor. The user sees the small image, but this 
small image is also a link to the full-size version of the image. This way the 
user can see the small image easily but can view the full-size image if she wishes. 
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X HTML gives you the ability to describe Web pages, but today's Web 
f\ isn't a one-way affair. Users want to communicate through Web pages, 
typing in information, making selections from drop-down lists, and interact- 
ing, rather than simply reading. In this chapter, you learn how to build these 
interactive elements in your pages. 



HaOe Great Form 

There's one more aspect to XHTML that you need to understand — the abil- 
ity to make forms. Forms are the parts of the page that allow some user inter- 
action. Figure 7-1 shows a page with all the primary form elements in place. 

The form demo (or f ormDemo . html on the CD-ROM, if you're playing along 
at home) is an example of all the main form elements in XHTML. In this chapter, 
you discover how to build all these elements. 

You can create forms with ordinary XHTML, but to make them do some- 
thing, you need a programming language. Book IV explains how to use 
JavaScript to interact with your forms, and Book V describes the PHP 
language. Use this chapter to figure out how to build the forms and then 
jump to another minibook to figure out how to make them do stuff. If you 
aren't ready for full-blown programming yet, feel free to skip this chapter 
for now and move on to CSS in Books II and III. Come back here when you're 
ready to make forms to use with JavaScript or PHP. 
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The formDemo . html page shows the following elements: 

♦ A form: A container for form elements. Although the form element itself 
isn't usually a visible part of the page (like the body tag), it could be 
with appropriate CSS. 

♦ Text boxes: These standard form elements allow the user to type text 
into a one-line element. 

♦ Password boxes: These boxes are like text boxes, except they automati- 
cally obscure the text to discourage snooping. 

♦ Text areas: These multi-line text boxes accommodate more text than the 
other types of text boxes. You can specify the size of the text area the 
user can type into. 

♦ Select lists: These list boxes give the user a number of options. The user 
can select one element from the list. You can specify the number of rows 
to show or make the list drop down when activated. 

♦ Check boxes: These non-text boxes can be checked or not. Check boxes 
act independently — more than one can be selected at a time (unlike 
radio buttons). 

♦ Radio buttons: Usually found in a group of options, only one radio 
button in a group can be selected at a time. Selecting one radio button 
deselects the others in its group. 
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♦ Buttons: These elements are used to let the user begin some kind of Book I 
process. The input button is used in JavaScript coding (which I fully Chapter 7 

^ibe in Book IV), whereas the standard and submit buttons are used for 
r-side programming (see Book V). The reset button is special because 
it automatically resets all the form elements to their default configurations. 5 

♦ Fieldsets and legends: Sometimes, these are used to set off parts of the 3 
form. They're optional, but they can add a lot of visual appeal to a form. 

i 

Now that you have an overview of form elements, it's time to start building w 
some forms! 



Forms must hai/e some form 

All the form objects must be embedded inside a <form></form> pair. The 
code for basicForm.html illustrates the simplest possible form: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>basicForm.html</title> 
</head> 



<body> 

<hl>A basic form</hl> 

<form action = ""> 

<h2>Form elements go here</h2> 
<h3>Other HTML is fine, too.</h3> 

</form> 



</body> 
</html> 



The <form></form> pair indicates a piece of the page that may contain 
form elements. All the other form doohickeys and doodads (buttons, select 
objects, and so on) must be inside a form pair. 

The action element indicates what should happen when the form is submitted. 
This requires a programming language, so a full description of the action 
attribute is in Book IV. Still, you must indicate an action to validate, so for 
now just leave the action attribute null with a pair of quotes (" ")■ 



Organizing, a form With fietdsets and (abets 

Forms can contain many kinds of things, but the most important elements 
are the input elements (text boxes, buttons, drop-down lists, and the like) 
and text labels that describe the elements. Web developers have traditionally 
used tables to set up forms, but this isn't really the best way to go because 
forms aren't really tabular information. XHTML includes some great features 
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to help you describe the various parts of a form. Figure 7-2 shows a page 
with fieldsets, layouts, and basic input. 



Iset is a special element used to supply a visual grouping to a set of 
form elements. 



The form still doesn't look very good, I admit, but that's not the point yet. 
Like all the other XHTML tags, the form elements aren't about describing 
how the table looks, but are about what all the main elements mean. (Here I 
go again. . . .) You use CSS to make the form look however you want. The 
XHTML tags describe the parts of the form, so you have something to hook 
your CSS to. It all makes sense very soon, I promise. 



Figure 7-2: 

This form 
has a 

legend and 
labels. 



Legend 
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Labels 



Input boxes 



Fieldset 
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Here's the code for the fieldset demo (fieldsetDemo .html on the Book I 

CD-ROM): Chapter 7 



html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" n 

www . w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> jj 

<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> o» 

<head> 5" 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> ffi 

<title>f leldsetDemo .html</ title> o 

</head> 3 



<body> 

<hl>Sample Form with a Fieldset</hl> 
<form action = ""> 
<f ieldset> 

<legend>Personal Data</legend> 

<P> 

<label>Name</label> 
<input type = "text" /> 
</p> 



<p> 

<label>Address</label> 
<input type = "text" /> 
</p> 

<P> 

<label>Phone</ label > 
<input type = "text" /> 
</p> 

</f ieldset> 
< / f orm> 
</body> 
</html> 



The form has these elements: 



♦ The <form> and </form> tags: These define the form as a part of the 
page. Don't forget the null action attribute. 

♦ The <f ieldset> pair: This pair describes the included elements as a 
set of fields. This element isn't necessary, but it does give you some nice 
organization and layout options later when you can do CSS. You can think 
of the fieldset as a blank canvas for adding visual design to your forms. By 
default, the fieldset places a border around all the contained elements. 

♦ The <legend> tag: A part of the fieldset, this tag allows you to specify a 
legend for the entire fieldset. The legend is visible to the user. 

♦ The paragraphs: I generally place each label and its corresponding input 
element in a paragraph. This provides some nice formatting capabilities 
and keeps each pair together. 
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♦ The < label > tag: This tag allows you to specify a particular chunk of text 
as a label. No formatting is done by default, but you can add formatting 
with CSS. 

< input > elements: These are the elements into which the user 
actually types data. For now, I'm just using very basic text inputs so the 
form has some kind of input. In the next section, I explain fully how to 
build more complete text inputs. 



DropBoote 



Building Text-Style Inputs 



Most of the form elements are variations of the same tag. The <input> tag 
can be used to create single-line text boxes, password boxes, buttons, and 
even invisible content (such as hidden fields). Most of these objects share 
the same basic attributes, although the outward appearance can be different. 



Making a standard text field 



Figure 7-3 shows the most common form of the input element — a plain text 
field. 



Figure 7-3: 

The input 
element is 
often used 
to make a 
text field. 
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To make a basic text input, you need a form and an input element. Adding a Book I 
label so that the user knows what he's supposed to enter into the text box is Chapter 7 
mon. Here's the code: 



DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 

"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 5* 

<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> £ 

<head> -n 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> § 

<title>textbox.html</title> =j 
</head> 

<body> 

<form action = ""> 
<P> 

<label>Name</label> 
< input type = "text" 

id = " txtName " 

value = "Joe"/> 

</p> 
</form> 



</body> 
</html> 



The input element has three common attributes: 



♦ type: The type attribute indicates the type of input element this is. 
This first example sets the type to text, creating a standard text box. 
Other types are used throughout this chapter to create passwords, 
hidden fields, check boxes, and buttons. 

♦ id: The id attribute creates an identifier for the field. When you use a 
programming language to extract data from this element, use the id to 
specify which field you're referring to. id fields often begin with a special 
hint phrase to indicate the type of object it is (for instance, txt indicates 
a text box). 

♦ value: This attribute determines the default value of the text box. If you 
leave this attribute out, the text field begins empty. 



Text fields can also have other attributes, which aren't used as often, such as 



♦ size: This attribute determines the number of characters that are 
displayed. 

♦ maxlength: Use this attribute to set the largest number of characters 
that are allowed. 



There is no </input> tag. Input tags are a holdover from the days when 
many tags did not have ending tags. You just end the original tag with a slash 
character (/), as shown in the preceding sample code. 
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Building a password field 

|""N ["^ [Passwords are just like text boxes, except the text isn't displayed. Instead, a 

J \Cj fj f| fj fj IderG of asterisks appears. Figure 7-4 shows a basic password field. 



The following code reveals that passwords are almost identical to ordinary 
text fields: 



<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>password.html</title> 
</head> 



<body> 

<form action = ""> 
<f ieldset> 

<legend>Enter a password</legend> 
<p> 

<label>Type password here</label> 
<input type = "password" 
id = "pwd" 
value = "secret" /> 

</p> 
</fieldset> 
</form> 

</body> 
</html> 
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Figure 7-4: 

Enter the 
secret pass- 
word 



-Enter a password 
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In this example, I've created a password field with the ID pwd. The default 
vajue of this field is secret. The term "secret" won't actually show up in the 
will be replaced with six asterisk characters. 




The password field offers virtually no meaningful security. It protects the 
user from the KGB glancing over his shoulder to read a password, but that's 
about it. The open standards of XHTML and the programming languages 
mean passwords are still often passed in the open. There are solutions — 
like the SSL (Secure Socket Layer) technology — but for now, just be aware 
that the password field just isn't suitable for protecting the recipe of your 
secret sauce. 
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As usual, this example doesn't really do anything with the password, but 
you'll use other technologies for that. 



Making mutti-tine text input 



The single-line text field is a powerful feature, but sometimes, you want 
something with a bit more space. The essay . html program, as shown in 
Figure 7-5, demonstrates how you might create a page for an essay question. 



Figure 7-5: 

This quiz 
might 
require a 
multi-line 
response. 
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Quiz 



• » CI- 



Please enter the sum total of Western thought. Be brief. 
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The star of this program is a new tag — <textarea>: 

ae^fPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
B%7www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
inrlang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>essay .html</title> 
</head> 

<body> 

<form action = ""> 
<f ieldset> 

<legend>Quiz</legend> 

<p> 

<label>Name</label> 
<input type = "text" 

id = "txtName" /> 

</p> 

<p> 

<label> 

Please enter the stun total of 
Western thought. Be brief. 
</label> 
</p> 

<p> 

<textarea id = "txtAnswer" 
rows = "10" 

cols = "40"></textarea> 

</p> 
</fieldset> 
</form> 

</body> 
</html> 





Here are a few things to keep in mind when using the <textarea> tag: 

♦ It needs an id attribute, just like the input element. 

♦ You can specify the size with rows and cols attributes. 

♦ The content goes between the tags. The text area can contain a lot more 
information than the ordinary <input> tags, so rather than placing the 
data in the value attribute, the content of the text goes between the 
<textarea> and </textarea> tags. 

Anything placed between <textarea> and </textarea> in the code ends 
up in the output, too. This includes spaces and carriage returns. If you don't 
want any blank spaces in the text area, snug up the ending tag right next to 
the beginning tag, as I did in the essay example. 
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Chapter 7 

es, you want to present the user with a list of choices and then have 
pick one of these elements. XHTML has a number of interesting c-a 
ways to do this. g 



Making selections 

The drop-down list is a favorite selection tool of Web developers for the fol- 
lowing reasons: 



♦ It saves screen space. Only the current selection is showing. When the 
user clicks the list, a series of choices drop down and then disappear 
again after the selection is made. 

♦ It limits input. The only things the user can choose are things you've 
put in the list. This makes it much easier to handle the potential inputs, 
as you don't have to worry about typing errors. 

♦ The value can be different than what the user sees. This seems like an 
odd advantage, but it does turn out to be very useful sometimes. I show 
an example as I describe color values later in this chapter. 



Figure 7-6 shows a simple drop-down list in action. 
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Figure 7-6: 

The user 
can choose 
from a list of 
colors. 



O # Now: Sunny, 3C ! F Wed: 82* F ^ Thu: 85° F ^ 



130 Creating Multiple Selection Elements 



The code for this simple drop-down list follows: 

ae^PE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
3^/www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
nrr^Lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>basicSelect .html</title> 
</head> 

<body> 

<form action = ""> 
<p> 

<label>What is your favorite color?</label> 
<select id = "selColor"> 

<option value = "#ff0000">Red</option> 
<option value = "#00ff00">Green</option> 
<option value = "#0000f f ">Blue</option> 
<option value = "#00f f f f ">Cyan</option> 
<option value = "#f f OOf f ">Magenta</option> 
<option value = "#ffffOO">Yellow</option> 
<option value = "#000000">Black</option> 
<option value = "#f f f f f f ">White</option> 
</select> 
</p> 
</form> 
</body> 
</html> 

The select object is a bit different from some of the other input elements 
you're used to, such as 

♦ It's surrounded by a <selectx/select> pair. These tags indicate 
the entire list. 

♦ The select object has an id attribute. Although the select object 
has many other tags inside, typically only the select itself has an id 
attribute. 

♦ It contains a series of <optionx/option> pairs. Each individual 
selection is housed in an <option></option> set. 

♦ Each option tag has a value associated with it. The value is used by 
code. The value isn't necessarily what the user sees. (See the sidebar 
"What are those funky #ff00ff things?" for an example.) 

♦ The content between <optionx/option> is visible to the user. The 

content is what the user actually sees. 




Select boxes don't have to have the drop-down behavior. If you want, you 
can specify the number of rows to display with the size attribute. In this 
case, the number of rows you specify will always be visible on the screen. 
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at are those funky #ff00ff things? 



tTfully at the code for 
basicSelect.html, you see that the 
values are all strange text with pound signs and 
weird characters. These are hex codes, and 
they're a good wayto describe colors for com- 
puters. I explain all about how these work in 
Book II, Chapter 1. It's really not nearly as hard 



to understand as it seems. For now though, 
understand this is a good example of wanting 
to show the user one thing (the name of a color 
in English) and send some other value (the hex 
code) to a program. You see this code again 
when I talk about JavaScript in Book IV. 
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Buiidinty check boxes 

Check boxes are used when you want the user to turn a particular choice on 
or off. For example, look at Figure 7-7. 

Each check box represents a true or false value. Each can be checked or not, 
and the status of each check box is completely independent from the others. 
The user can check none of the options, all of them, or any combination. 



5 checkBoxes.html - Mozilla Firefox 
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Figure 7-7: 

Any number 
of check 
boxes can 
be selected 
at once. 
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This code shows that check boxes use your old friend the input tag: 



ae^fPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
B%7www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
na^Lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>checkBoxes .html</title> 
</head> 



<body> 

<form action = ""> 
<f ieldset> 

<legend>Please check off your life goals ... </legend> 
<p> 

<input type = "checkbox" 
id = "chkPeace" 
value = "peace" />World peace 

</p> 



<P> 

<input type = "checkbox" 
id = "chkHarmony" 

value = "harmony" />Harmony and brotherhood 

</p> 



<P> 

<input type = "checkbox" 
id = "chkCash" 
value = "cash" />Cash 

</p> 

</fieldset> 
</form> 

</body> 
</html> 



You're using the same attributes of the input tag, but the way they work is a 
little bit different than in a plain old text box: 

♦ The type is checkbox. That's how the browser knows to make a check 
box, rather than a text field element. 

♦ The checkbox still requires an ID. If you'll be writing programming 
code to work with this thing (and you will, eventually), you'll need an ID 
for reference. 

♦ The value is hidden from the user. The user doesn't see the actual 
value. That's for the programmer (like the select object). Any text fol- 
lowing the check box appears to be the text associated with it. 
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This all seems inconsistent 



sonTeTirrres, tne"vairje of a form element is visi- 
ble to users, and sometimes, it's hidden. 
Sometimes, the text the user sees is inside the 
tag, and sometimes, it isn't. It's a little confus- 
ing. The standards evolved over a long time, 
andthey honestly could have been a little more 



consistent. Still, this is the set of elements you 
have, and they're not really that hard to under- 
stand. Write forms a few times, and you'll 
remember. You can always start by looking over 
my code and borrowing it as a starting place. 
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Creating radio buttons 

Radio buttons are used when you want to let the user pick only one option 
from a group. Figure 7-8 shows an example of a radio button group in action. 
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—How much do you want to spend? 

O Tec much 
O Way too much 
©You've got to be kidding. 
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Figure 7-8: 

You can 
choose only 
one of these 
radio 
buttons. 
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Radio buttons might seem a lot like check boxes, but they have some impor- 
tant differences: 



ly one can be checked at a time. The term radio button came from 
the old-style car radios. When you push the button for one station, all 
the other buttons pop out. I still have one of those radios. (I guess I have 
a Web-design car.) 

♦ They have to be in a group. Radio buttons make sense only in a group 
context. The whole point of a radio button is to interact with its group. 

♦ They all have the same name! Each radio button has its own ID (like 
other input elements), but they also have a name attribute. The name 
attribute indicates the group a radio button is in. 

♦ You can have more than one group on a page. Just use a different name 
attribute for each group. 

♦ One of them has to be selected. The group should always have one 
value and only one. Some browsers check the first element in a group by 
default, but just in case, you should select the element you want 
selected. Add the checked = " checked" attribute (developed by the 
Department of Redundancy Department) to the element you want 
selected when the page appears. In this example, I pre-selected the most 
expensive option, all in the name of good capitalistic suggestive selling. 

Here's some code that explains it all: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /KM" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>radioButtons . html</ title> 
</head> 



<body> 

<form action = ""> 
<f ieldset> 

<legend>How much do you want to spend?</legend> 
<P> 

<input type = "radio" 

name = "radPrice" 

id = "radlOO" 

value = "100" />Too much 

</p> 



<p> 

<input type = 
name - 
id = 1 
value 

</p> 



"radio" 
"radPrice" 
rad2 00" 

= "200" />Way too much 



<p> 

<input type = "radio" 
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name = "radPrice" Book I 

id = "rad5000" Ph.t..i 
value = "5000- Cha P ter 7 

checked = "checked" />You've got to be kidding. 

P> _ 

eldset> " 

</form> 09 

</body> 5" 

</html> <= 
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Pressing \lour Buttons 



XHTML also comes with several types of buttons. You use these guys to 
make something actually happen. Generally the user sets up some kind of 
input by typing in text boxes and then selecting from lists, options, or check 
boxes. Then, the user clicks a button to trigger a response. Figure 7-9 demon- 
strates the four main types of buttons. 
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Figure 7-9: 

XHTML 
supports 
several 
types of 
buttons. 
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The code for this button example is shown here: 
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^PE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
hVwww.wB . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>buttons .html</title> 
</head> 



<body> 

<hl>Button Demo</hl> 
<form action = ""> 
<f ieldset> 
<legend> 

input-style buttons 
</legend> 



<input type = "button" 

value = "input type = button" /> 



<input type = "submit" /> 
<input type = "reset" /> 
</fieldset> 



<f ieldset> 

<legend>button tag buttons</legend> 



<button type = "button" > 

button tag 
</button> 
<button> 

<img src = "clickMe.gif 11 
alt = "click me" /> 
</button> 
</fieldset> 
</fom> 
</body> 
</html> 



Each button type is described in this section. 

Making input-style buttons 

The most common form of button is just another form of your old friend, the 
<input> tag. If you set the input's type attribute to "button", you gener- 
ate a basic button: 



<input type = "button" 

value = "input type = button" /> 
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The ordinary input button has a few key features: Book I 

Chapter 7 

nput type is set to "button". This makes an ordinary button. 



value attribute sets the button's caption. Change the value attrib- o 
ute to make a new caption. This button's caption shows how the button §> 
was made: input type = "button". 5" 

♦ This type of button doesn't imply a link. Although the button appears 5 
to depress when it's clicked, it doesn't do anything. You have to write gj 
some JavaScript code to make it work. 

♦ Later, you'll add event-handling to the button. After you discover Java 
Script in Book IV, you use a special attribute to connect the button to code. 

♦ This type of button is for client-side programming. This type of code 
resides on the user's computer. Read how to do it in Book IV. 



Building a submit button 

Submit buttons are usually used in server-side programming. In this form of 
programming, the code is back on the Web server. In Book V, you figure out 
how to use PHP to create server-side code. The input tag is used to make a 
submit button, too! 



< input type = "submit" /> 



Although they look the same, the submit button is different than the ordi- 
nary button in a couple subtle ways: 



♦ The value attribute is optional. If you leave it out, the button says 
"Submit Query." Of course, you can change the value to anything you 
want, and this becomes the caption of the submit button. 

♦ Clicking it causes a link. This type of button is meant for server-side 
programming. When you click the button, all the information in the form 
is gathered and sent to some other page on the Web. 

♦ Right now, it goes nowhere. When you set the form's action attribute 
to null (" "), you told the submit button it should just reload the current 
form. When you figure out real server-side programming, you change the 
form action to a program that works with the data. 

♦ Submit buttons aren't for client-side. Although you can attach an event 
to the submit button (just like the regular input button), the linking 
behavior often causes problems. Use regular input for client-side and 
submit for server-side. 
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It's a do-oVer: The reset button 

Yet another form of the versatile input tag is used to create the reset 



<input type = "reset" /> 



This button has a very specific purpose. When it's clicked, it resets all the 
elements of its form to their default values. Like the submit button, it has a 
default value ("reset"), and it doesn't require any code. 

Introducing the button tag 

The button has been a useful part of the Web for a long time, but it's a bit 
boring. HTML 4.0 introduced the new button tag, which works like this: 



<button type = "button" > 

button tag 
</button> 



The button tag acts more like a standard XHTML tag, but it can also act like 
the submit button. Here are the highlights: 



♦ The type attribute determines the style. You can set the button to be 

ordinary (by setting its type to button), submit, or reset. If you don't 
specify the type, buttons use the submit style. The button type 
indicates its behavior, just like the input-style buttons. 

♦ The caption goes between the <buttonx/button> pair. There's no 
value attribute. Instead, just put the intended caption inside the button 
pair. 

♦ You can incorporate other elements. Unlike the input button, you can 
place images or styled text inside a button. This gives you some other 
capabilities. The second button in the buttons .html example uses a 
small GIF image to create a more colorful button. 



Book II 

Styling with CSS 




Change your fonts, colors, and backgrounds with CSS. 
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In This Chapter 

V Introducing the style element 

V Adding styles to tags 

C* Modifying your page dynamically 

Specifying foreground and background colors 
C" Understanding hex colors 
f* Developing a color scheme 



JT HTML does a good job of setting up the basic design of a page, but let's 
f\ face it. The pages it makes are pretty ugly. Back in the old days, devel- 
opers added a lot of other tags to HTML to make it prettier, but it was a 
pretty haphazard affair. Now, XHTML disallows all the tags that were used to 
make pages more attractive. It's not really a loss because, today, XHTML is 
almost always written in concert with CSS (Cascading Style Sheets). It's 
amazing how much you can do with CSS to beautify your XHTML pages. 

CSS is used in many ways. It allows you to change the color of any image on 
the page. CSS lets you add backgrounds and borders. You can use CSS to 
change the visual appearance of elements like lists and links, as well as cus- 
tomize the entire layout of your page. CSS allows you to keep your XHTML 
simple because all the formatting is stored in the CSS. It's also very efficient 
because CSS allows you to reuse a style across multiple pages. If XHTML 
gives your pages structure, CSS gives them beauty. 

This chapter gets you started by describing how to add color to your pages. 



Nov) \lou HaVe an Element of Style 

The secret to CSS is the style sheet, a set of rules for describing how various 
objects will be displayed. As an example, look at basicColors . html in 
Figure 1-1. 

As always, don't take my word for it. This chapter is about color, and you need 
to look at these pages from the CD or Web site to see what I'm talking about. 
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Figure 1-1: 

This page is 
in color! 




Absolutely nothing in the XHTML code provides color information. What 
makes this page different from plain XHTML pages is a new section that I've 
stashed in the header. Take a gander at the code to see what's going on: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>basicColors .html</title> 
<style type = "text/css"> 
body { 

color: yellow; 
background-color: red; 

} 



hi { 

color: red; 

background-color: yellow; 

} 

</style> 
</head> 



<body> 

<hl>Red text on a yellow background</hl> 
<p> 

Yellow text on a red background 
</p> 
</body> 
</html> 
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As you can see, nothing is dramatically different in the XHTML code. The 
body simply contains an hi and a p. Although the text mentions the colors, 
n the XHTML code makes the colors really happen. 



The secret is the new <style></style> pair I put in the head area: 



<style type = " text/ess "> 
body { 

color: yellow; 
background-color: red; 

} 




hi { 

color: red; 

background-color: yellow; 

} 

</style> 

The <style> tag is an HTML tag, but what it does is special: It switches 
languages! Inside the style elements, you're not writing XHTML any more. 
Now you're in a whole new language — CSS. CSS has a different job than 
XHTML, but they're made to work well together. 

It may seem that the CSS code is still part of HTML because it's inside the 
XHTML page, but it's best to think of XHTML and CSS as two distinct (if 
related) languages. XHTML describes the content, and CSS describes the 
layout. CSS (as you soon see) has a different syntax and style than XHTML, 
and it isn't always embedded in the Web page. 
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Setting up a style sheet 

Style sheets describe presentation rules for XHTML elements. If you look at 
the preceding style sheet (the code inside the style tags), you can see that 
I've described presentation rules for two elements: the body and hi tags. 
Whenever the browser encounters one of these tags, it attempts to use these 
style rules to change that tag's visual appearance. 

Styles are simply a list of selectors (places in the page that you want to modify). 
For now, I use tag names (body and hi) as selectors. But in Chapter 3 of this 
minibook, I show many more selectors that you can use. 

Each selector can have a number of style rules. Each rule describes some 
attribute of the selector. To set up a style, keep the following in mind: 

♦ Begin with the style tags. The type of style you'll be working with now is 
embedded directly into the page. You should describe your style in the 
header area. 
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Include the style type in the header area. The style type is always 
' text/ess " . The beginning style tag always looks like this: 



<style type = "text/ess" 



Define an element. Use the element name (the tag name alone) to begin 
the definition of a particular element's style. You can define styles for all 
the XHTML elements (and other things, too, but not today). The style 
rule for the body is designated like this: 

body { 

Use braces ({ }) to enclose the style rules. Each style's rules are 
enclosed in a set of braces. This is similar to many programming lan- 
guages, which use braces to mark off special sections of code. It's tradi- 
tional to indent inside the braces. 

Give a rule name. In this chapter, I'm working with two very simple rules: 
color and background-color. Throughout this minibook, you can read 
about many more CSS rules (sometimes called attributes) that you can 
modify. The rule name is always followed by a colon ( : ) character. 

Enter the rule's value. Different rules take different values. The attribute 
value is followed by a semicolon. Each name-value pair is traditionally 
put on one line, like this: 

body { 

color: yellow; 
background-color: red; 

} 



Chanqinq the colors 

In this very simple example, I've just changed some colors around. Here are 
the two primary color attributes in CSS: 

♦ color: This refers to the foreground color of any text in the element. 

♦ background-color: The background color of the element. (The 
hyphen is a formal part of the name. If you leave it out, the browser 
won't know what you're talking about.) 

With these two elements, you can specify the color of any element. For 
example, if you want all your paragraphs to have white text on a blue back- 
ground, add the following text to your style: 

p { 

color: white; 
background-color: blue; 

} 
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Like XHTML Strict, CSS is case-sensitive. CSS styles should be written 
erJiirely in lowercase. 



re out many more style elements in your travels, but they all follow 
the same principles illustrated by the color attributes. 



Specifying Colors in CSS 



Here are the two main ways to define colors in CSS. You can use color names, 
such as pink and fuchsia, or you can use hex values. (Later in this chapter, 
in the section "Creating Your Own Color Scheme," you find out how to use spe- 
cial numeric designators to choose colors.) Each approach has its advantages. 



Using color names 

Color names seem like the easiest solution, and, for basic colors like red and 
yellow, they work fine. However, here are some problems with color names 
that make them troublesome for Web developers: 

♦ Only 16 color names will validate. Although hundreds of color names 
are accepted by most browsers, only 16 are guaranteed to validate in 
CSS and XHTML validators. See Table 1-1 for a list of those 16 colors. 

4- Color names are somewhat subjective. You'll find different opinions on 
what exactly constitutes any particular color, especially when you get to 
the more obscure colors. (I personally wasn't aware that PeachPuf f and 
PapayaWhip are colors. They sound more like dessert recipes to me.) 

♦ It can be difficult to modify a color. For example, what color is a tad 
bluer than Gainsboro? (Yeah, that's a color name, too. I had no idea 
how extensive my color disability really was.) 

♦ They're hard to match. Let's say you're building an online shrine to 
your cat and you want the text to match your cat's eye color. It'll be hard 
to figure out exactly what color name corresponds to your cat's eyes. I 
guess you could ask. 



Table 1-1 


Legal Color Names and Hex Equivalents 


Color 


Hex Value 


Black 


#000000 


Silver 


#cococo 


Gray 


#808080 


White 


#FFFFFF 


Maroon 


#800000 



(continued) 
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Hex Value 



#FF0000 



Purple #800080 



Fuchsia #FF00FF 



Green #008800 



Lime #00FF00 



Olive #808000 



Yellow #FFFF00 



Navy #000080 



Blue #0000FF 



Teal #008080 



Aqua #00FFFF 




The mysterious hex codes are included in this table for completeness. It's 
really okay if you don't understand what they're about. All is revealed in the 
next section. 

Obviously, I can't show you actual colors in this black-and-white book, so I 
added a simple page to the CD-ROM and Web site that displays all the named 
colors. Check namedColors .html to see the actual colors. 



Putting a hex on your colors 



Colors in HTML are a strange thing. The "easy" way (with color names) turns 
out to have a lot of problems. The method most Web developers really use 
sounds a lot harder, but it isn't as bad as it may seem at first. The hex color 
scheme uses a seemingly bizarre combination of numbers and letters to 
determine color values. #00FFFF is aqua. #FFFF00 is yellow. It's a scheme only 
a computer scientist could love. Yet, after you get used to it, you'll find the 
system has its own geeky charm. (And isn't geeky charm the best kind?) 

Hex colors work by describing exactly what the computer is doing, so you 
have to know a little more about how computers work with color. Each dot 
(or pixel) on the screen is actually composed of three little tiny beams of 
light (or LCD diodes or something similar). Each pixel has tiny red, green, 
and blue beams. 



The light beams work kind of like stage lights. Imagine a black stage with 
three spotlights (red, green, and blue) trained on the same spot. If all the 
lights are turned off, the stage is completely dark. If you turn on only the red 
light, you see red. You can turn on combinations to get new colors. For 
example, turning on red and green creates a spot of yellow light. Turning on 
all three lights makes white. 
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Coiovinq by number 

["^ ^'oli devise a simple system to describe colors by using 1 to represent 
J | fj fj fj fyMtfisQto represent off. In this system, three digits represent each color, 

^wixhVrle digit each for red, green, and blue. So, red would be 100 (turn on red, 
but turn off green and blue), and 111 would be white (turn on all three lights). 

This system produces only eight colors. In a computer system, each of the 
little lights can be adjusted to various levels of brightness. These values 
measure from 0 (all the way off) to 255 (all the way on.) So, you could 
describe red as rgb (2 55 , 0, 0 ) and yellow as rgb (255 , 255, 0). 

The 0 to 255 range of values seems strange because you're probably used to 
base 10 mathematics. The computer actually stores values in binary notation 
The way a computer sees it, yellow is actually 11111111111111 1 100000000. 
Ack! There's got to be an easier way to handle all those binary values. That's 
why we use hexadecimal notation. Read on. . . . 

Hex education 

All those Is and 0s get tedious. Programmers like to convert to another 
format that's easier to work with. It's easier to convert numbers to base 16 
than base 10, so that's what programmers do. You can survive just fine with- 
out understanding base 16 (also called hexadecimal or hex) conversion, but 
you should understand a few key features, such as: 

♦ Each hex digit is shorthand for four digits of binary. The whole reason 
programmers use hex is to simplify working with binary. 

♦ Each digit represents a value between 0 and 15. Four digits of binary 
represent a value between 0 and 15. 

♦ We have to invent some digits. The whole reason hex looks so weird is 
the inclusion of characters. This is for a simple reason: There aren't enough 
numeric digits to go around! Table 1-2 illustrates the basic problem. 



Table 1-2 


Hex Representation of Base Ten Numbers 


Decimal (Base 10) 


Hex (Base 16) 


0 


0 


1 


1 


2 


2 


3 


3 


4 


4 


5 


5 



(continued) 
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at (Base 10) 



10 



11 



12 



13 



14 



15 



Hex (Base 16) 



The ordinary digits 0-9 are the same in hex as they are in base 10, but the 
values from 10-15 (base ten) are represented by alphabetic characters in 
hexadecimal. 




You're very used to seeing the value 10 as equal to the number of fingers on 
both hands, but that's not always the case when you start messing around 
with numbering systems like we're doing here. 10 simply means one of the 
current base. Up to now, you may have never used any base but base ten, 
but all that changes here. 10 is ten in base ten, but in base two, 10 means 
two. In base eight, 10 means eight, and in base sixteen, 10 means sixteen. 
This is important because when you want to talk about the number of digits 
on your hands in hex, you can't use the familiar notation 10, because in hex 
10 means sixteen. We need a single-digit value to represent ten, so computer 
scientists legislated themselves out of this mess by borrowing letters. Ten is 
A, eleven is B, and fifteen is F. 



If all this math theory is making you dizzy don't worry. I show in the next 
section some shortcuts for creating great colors using this scheme. For now, 
though, here's what you need to understand to use hex colors: 



♦ A color requires six digits of hex. A pixel requires three colors, and 
each color uses eight digits of binary. Two digits of hex cover each color. 
Two digits represent red, two for green, and finally two for blue. 

♦ Hex numbers usually begin with a pound sign. To warn the browser 
that a value will be in hexadecimal, the value is usually preceded with a 
pound sign (#). So, yellow is #FFFF00. 



Working with colors in hex may seem really crazy and difficult, but it has 
some important advantages: 
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♦ Precision: Using this system gives you a huge number of colors to work 
with (over 16 million, if you really want to know). There's no way you could 
up with that many color names on your own. Well, you could, but 
be very very old by the time you were done. 



♦ Objectivity: Hex values aren't a matter of opinion. There could be some 
argument about the value of burnt sienna, but hex value #666600 is 
unambiguous. 

Portability: Most graphic editors use the hex system, so you can pick 
any color of an image and get its hex value immediately. This would 
make it easy to find your cat's eye color for that online shrine. 

Predictability: After you understand how it works, you can take any hex Book II 

color and convert it to a value that's a little darker, a little brighter, or Chapter 1 
that has a little more blue in it. This is difficult to do with named colors. 

o 

Ease of use: This one may seem like a stretch, but after you understand o 

the Web-safe palette, which I describe in the next section, it's very easy =' 

to get a rough idea of a color and then tweak it to make exactly the form -< 



you're looking for. 

Using the Web-safe color paiette 

A long time ago, browsers couldn't even agree on what colors they'd display 
reliably. Web developers responded by working within a predefined palette 
of colors that worked pretty much the same on every browser. Today's 
browsers have no problems showing lots of colors, but the so-called Web- 
safe color palette is still sometimes used because it's an easy starting point. 

The basic idea of the Web-safe palette (shown in Table 1-3) is this: Each 
color can have only one of the following values: 00, 33, 66, 99, AA, CC, or FF. 
00 is the darkest value for each color, and FF is the brightest. The primary 
colors are all made of 0s and Fs: #FF0000 is red (all red, no green, no blue). 
A Web-safe color uses any combination of these values, so #33AA00 is Web- 
safe, but #112233 is not. 



o 
c 

i 
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Table 1-3 




Web-Safe Color Values 


Description 


Red 


Green 


Blue 


Very bright 


FF 


FF 


FF 




CC 


CC 


CC 




AA 


AA 


AA 




99 


99 


99 




66 


66 


66 




33 


33 


33 


Very dark 


00 


00 


00 
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To pick a Web-safe value from this chart, determine how much of each color 
you want. A bright red will have red turned on all the way (FF) with no green 
d no blue (00), making #FF0000. If you want a darker red, you might 
e red down a little. The next darker Web-safe red is #CC0000. If that isn't 
dark enough, you might try #AA0000. Let's say you like that, but you want it a 
little more purple. Simply add a notch or two of blue: #AA0033 or #AA0066. 




If you're having trouble following this, look at colorTester . html on the 
CD-ROM. It allows you to pick a Web-safe color by clicking on buttons organized 
just like Table 1-3. 

The original problem Web-safe colors were designed to alleviate is long 
resolved, but they're still popular as a starting point. Web-safe colors give 
you a dispersed and easily understood subset of colors you can start with. 
You don't have to stay there, but it's a great place to start. 



Choosing l/our Colors 

Figure 1-2 shows a program I added to the Web page and CD-ROM. This page 
lets you experiment with colors. I refer to it during this discussion. 
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The colorTester.html (as shown in Figure 1-2) page uses techniques that 
I describe primarily in Book IV, Chapter 5. Feel free to look over the source 
get a preview of JavaScript and Dynamic HTML concepts. By the end 
JV, you can write this program. 



i aescrme 



The best way to understand colors is to do some hands-on experimentation. 
You can use the colorTester . html page to do some quick tests, or you 
can write and modify your own pages that use color. 



Starting With Web-safe colors 



The colorTester . html program works by letting you quickly enter in a 
Web-safe value. To make red, press the FF button in the red column. The blue 
and green values have the default value of 00, so the background is red. 

The Web-safe colors give you a lot of room to play, and they're very easy to 
work with. In fact, they're so common that you can use a shortcut. Because 
the Web-safe colors are all repeated, you can write a repeated digit (FF) as a 
single digit (F). You can specify magenta as either #ff00ff or as #fof and 
the browser understands, giving you a headache-inducing magenta. 

To make a darker red, change the FF to the next smallest value, making 
#CC0000. If you want it darker yet, try #AA0000. Experiment with all the red 
values and see how easy it is to get several different types of red. If you want a 
variation of pink, raise the green and blue values together. #FF9999 is a dusty 
pink color; #FFAAAA is a bit brighter; and #FFCCCC is a very white pink. 
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Modifying your colors 

The Web-safe palette is convenient, but it gives you a relatively small number 
of colors (216, if you're counting). Two hundred and sixteen crayons in the 
box are pretty nice, but you might need more. Generally, I start with Web-safe 
colors and then adjust as I go. If you want a lighter pink than #FFCCCC, you 
can jump off the Web-safe bandwagon and use #FFEEEE or any other color 
you wish! 

In the colorTester . html program, you can use the top and bottom button 
in each row to fine tune the adjustments to your color. 



Doing it on your ow)n pages 

Of course, it doesn't really matter how the colors look on my page. The point 
is to make things look good on your pages. To add color to your pages, do 
the following: 

/. Define the XHTML as normal. 

The XHTML shouldn't have any relationship to the colors. Add the color 
strictly in CSS. 
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2. Add a style tag to the page in the head area. 

Don't forget to set the type = " text/ess" attribute, 
d a selector for each tag you want to modify. 



You can modify any HTML tag, so if you want to change all the para- 
graphs, add a p { } selector. Use the tag name without the angle 
braces, so <hl> becomes hi { } . 



4. Add color and background-color attributes 

You'll discover many more CSS elements you can modify throughout 
Books II and III but for now, stick to color and background-color. 

5. Specify the color values with color names or hex color values 



Chanqinq CSS on the f(y 

If you've installed the Web Developer toolbar to Firefox (which I describe in 
Book I, Chapter 3) you have some really nifty CSS tools at your disposal. I 
really love the CSS editor. To make it work, take any page (without CSS) and 
open it in Firefox. For this example, I use a list example from Book I, Chapter 4. 



Be sure the Web Developer toolbar is installed and choose Edit CSS from the 
CSS menu. A new panel that looks like Figure 1-3 pops up. 



Figure 1-3: 

The Web 
Developer 
toolbar has 
a great CSS 
feature. 
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Basic Definition List 

Common Web Browsers 

Mosaic 

The mother of all modern brow sers. The first widely used \isual browser. 
Netscape 

The commercial successor to Mosaic Widely popular, but eventually eclipsed by Internet Explorer 

IE 

Xlicrosoft's entrv into the brow ser market, and a dominant plaver. 
Fkefox 

An open-source brow ser that has shaken up the world. 
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You can simply type CSS code into the little text editor, and the page is updated 
instantly! Figure 1-4 shows the same page after I made a few changes. 



lor to make the definition list easier to view. I changed both the 
foreground and background colors in the heading level 1. 1 set the definition 
terms (dt) to red and added a yellow background to the definitions (dd). 
Check Book I, Chapter 4 if you need a refresher on definition lists in XHTML. 




Figure 1-4: 

The CSS 
changes 
show 

immediately. 



The Web Developer CSS editor is great because you can see the results in 
real time. It's a super way to play around with your colors (and other CSS 
elements). You can also use it to view and modify an existing CSS document. 
Pull up any page you want and open the CSS editor. You can change colors 
all you want without making a commitment. 

None of the changes made using the Web Developer CSS editor are permanent. 
You're making changes only in the copy in your own browser. If you really like 
the CSS code you've written in the editor, copy it to the clipboard and paste it 
into your page to make it permanent, or save it to a file for later use. 
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Common Web Browsers 

Mosaic 

The mother of all modem browsers The first widely used \isual browser 

Netscape 
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The commercial successor to Mosaic. Widely popular, but eventually eclipsed by Internet Explorer 
Microsoft's entrv into the browser market, and a dominant pla - . 
An open-source browser that has shaken up the world. 
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chnical side of setting colors isn't too difficult, but deciding what 
to use can be a challenge. Entire books have been written about how 
to determine a color scheme. A little bit of subjectivity is in the process, but 
a few tools and rules can get you started. 



Understanding hue, saturation, and i/atue 

The RGB color model is useful because it relates directly to how computers 
generate color, but it's not perfect. It's a bit difficult to visualize variations of 
a color in RGB. For that reason, other color schemes are often used. The 
most common variation is Hue, Saturation, and Value, or HSV. The HSV 
system organizes colors in a way more closely related to the color wheel. 

To describe a color using HSV, you specify three characteristics of a color 
using numeric values. 

♦ Hue: The basic color. The color wheel is broken into a series of different 
hues. These are generally middle of the road colors that can be made 
brighter (closer to white) and darker (closer to black). 

♦ Saturation: How pervasive the color is. A high saturation is very bright. 
A low saturation has very little color. If you reduce all the saturation in 
an image, the image is grayscale, with no color at all. 

♦ Value: The brightness of the color. The easiest way to view value is to 
think about how the image would be when reduced to grayscale (by 
pulling down the saturation). All the brighter colors will be closer to 
white, and the darker colors will be nearly black. 

The HSV model is useful because it allows you to pick colors that go well 
together. Use the hue property to pick the basic colors. Because there's a 
mathematical relationship between the various color values, it becomes 
easy to predict which colors work well together. After you have all the hues 
worked out, you can change the saturation and value to modify the overall 
tone of the page. Generally, all the colors in a particular scheme have similar 
saturation and values. 



Unfortunately, you can't specify CSS colors in HSV mode. Instead, you have to 
use another tool to get the colors you want and convert them to RGB format. 



Using the Cotor Scheme Generator 

Some people have great color sense. Others (like me) struggle a little bit 
because it all seems a little subjective. If you're already confident with colors, 
you may not need this section — although you still might find it interesting 
validation of what you already know. On the other hand, if you get perplexed 
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as shown 



in a paint store, you might find it helpful to know that some really useful 
tools are available. 



t way to get started is with a free tool: the Color Scheme Generator, 
as shown in Figure 1-5. This tool created by Petr Stanicek uses a variation of 
the HSV model to help you pick color schemes. You can find this program at 

http : / /wells tyled . com/ tools / color scheme2 / index-en . html. 

The Color Scheme Generator has several main areas, such as: 

♦ The color wheel: This tool may bring back fond memories of your ele- 
mentary school art class. The wheel arranges the colors in a way famil- 
iar to artists. You can click the color wheel to pick a primary color for 
your page. 



can see how the various colors work together. 

Hex values: The hex values for the selected co 
page so you can copy them directly to your own application. 



Book II 
Chapter 1 



The color scheme selector: You can pick from a number of color ° 

schemes. I describe these schemes a little later in this section. i. 

s 

CO 

A preview area: This area displays the selected colors in action so you g; 



Hex values: The hex values for the selected colors are displayed on the ^ 



Figure 1-5: 

The Color 
Scheme 
Generator 
helps you 
pick colors. 
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Variations: You can look at variations of the selected scheme. These 
variations are often useful because they show differences in the satura- 
n and value without you doing the math. 




lor-blindness simulation: This very handy tool lets you see your color 
scheme as it appears to people with various types of color-blindness. 

This won't make sense without experimentation. Be sure to play with this 
tool and see how easy it is to create colors that work well together. 



Selecting a base hue 

The Color Scheme Generator works by letting you pick one main hue and 
then uses one of a number of schemes for picking other hues that work well 
with the base one. To choose the base hue you want for your page, click a 
color on the color wheel. 



The color wheel is arranged according to the traditional artist's color scheme 
based on HSV rather than the RGB scheme used for computer graphics. When 
you select a color, the closest RGB representation is returned. This is nice 
because it allows you to apply traditional (HSV-style) color theory to the 
slightly different RGB model. 

When you pick a color on the color wheel, you're actually picking a hue. If 
you want any type of red, you can pick the red that appears on the wheel. 
You can then adjust the variations to modify the saturation and value of all 
the colors in the scheme together. 

To pick a color using this scheme, follow these steps: 

/. Pick a hue. 

The colors on the color wheel actually represent hues. Find a color you 
want to use as the foundation of your page. 

2. Choose a variation. 

Rather than working directly with saturation and value, the variations 
(pastel, contrast, pale, and so on) pick saturations and values for you. 

3. Determine a scheme. 

The scheme allows you to specify a number of colors related to the base 
color according to various mathematical relationships. 



Picking a cotor scheme 

The various color schemes use mathematical relationships around the color 
wheel to predict colors that work well with the primary color. Here are the 
basic schemes and what they do: 
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♦ Monochramatic (mono): Takes the base hue and offers a number of vari- 
ations in saturation and value. This scheme is nice when you really want 
phasize one particular color (for example, if you're doing a Web 
bout rain forests and want a lot of greens). Be sure to use high con- 
trast between the foreground and background colors so your text is 
readable. 



♦ Contrast: Uses the base hue and the complementary (opposite) color. 
Generally, this scheme uses several variations of the base hue and a 
splash of the complementary hue for contrast. 

♦ Triad: Selects the base hue and two opposite hues. When you select the 
triad scheme, you can also choose the angular distance between the 
opposite colors. If this distance is zero, you have the complementary 
color scheme. When the angle increases, you have a split complementary 
system, which uses the base hue and two hues equidistant from the con- o 
trast. Such schemes can be jarring at full contrast, but when adjusted for 5" 
saturation and value, you can create some very nice color schemes. 5" 

♦ Tetrad: Generates four hues. As with the triad, when you add more hues, ^ 



it becomes more difficult to keep your page unified unless you adjust the 
variations for lower contrast. 

♦ Analogic: Schemes use the base hue and its two neighbors. Sometimes 
this scheme includes the complementary color as well. 
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Chapter 2: Styling Text 
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1 In This 




is Chapter 

Introducing fonts and typefaces 
W Specifying the font family 

Determining font size 

Understanding CSS measurement units 
V Managing other font characteristics 
f Using the font rule to simplify font styles 



pages are still primarily a text-based media, so you'll want to add 
ww some formatting capabilities. XHTML doesn't do any meaningful text 
formatting on its own, but CSS adds a wide range of tools for choosing the 
typeface, font size, decorations, alignment, and much more. In this chapter, 
you discover how to manage text the CSS way. 

A bit of semantics is in order. The thing most people dub a font is more prop- 
erly a typeface. Technically, a font is a particular typeface at a particular size 
with a specific set of decorations (underlining, italic, and so on). The distinc- 
tion is honestly not that important in a digital setting. You don't explicitly set 
the font in CSS. You determine the font family (which is essentially a typeface), 
and then you modify its characteristics (creating a font as purists would think 
of it). Still, when I'm referring to the thing most people call a font (a file in the 
operating system that describes the appearance of an alphabet set), I use the 
familiar term font. 



Setting the Font Family 



To assign a font family to part of your page, use some new CSS. Figure 2-1 
illustrates a page with the heading set to Comic Sans MS. 



If this page is viewed on a Windows machine, it generally displays the font 
correctly because Comic Sans MS is installed with most versions of Windows. 
If you're on another type of machine, you may get something else. More on 
that in a moment, but, for now, look at the simple case. 
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Figure 2-1: 

The headline 
is in the 
Comic Sans 
font (most of 
the time). 



This is a heading 



This is ordinary text. 
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Here's the code: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>comicHead.html</title> 
<style type = " text/ess "> 
hi { 

font-family: "Comic Sans MS"i 

} 

</style> 
</head> 



<body> 

<Hl>This is a heading</Hl> 
<p> 

This is ordinary text. 
</p> 
</body> 
</html> 



Applying, the font-famity style attribute 

The secret to this page is the CSS font- family attribute. Like most CSS 
elements, this can be applied to any HTML tag on your page. In this particular 
case, I applied it to my level one heading. 
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hi { 

font-family: "Comic Sans MS"; 
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hen attach any font name you wish, and the browser attempts to 
use that font to display the element. 

Even though a font may work perfectly fine on your computer, it may not 
work if that font isn't installed on the user's machine. 

If you run exactly the same page on a Linux machine, you see the result 
shown in Figure 2-2. 

The specific font Comic Sans MS is installed on Windows machines, but the 
MS stands for Microsoft. This font isn't typically installed on Linux. (It is on 
some Macs, but not all.) You can't count on users having any particular fonts 
installed. 



Using generic fonts 



It's a little depressing. Even though it's easy to use fonts, you can't use them 
freely because you don't know if the user has them. Fortunately, you can do 
a few things that at least increase the odds in your favor. The first trick is to 
use generic font names. These are virtual font names that every compliant 
browser agrees to support. Figure 2-3 shows a page with all the generic fonts. 
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This is a heading 



This is ordinary text. 



Figure 2-2: 

Under Linux, 
the heading 
isn't the 
same font! 
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I used browser controls to make the fonts larger than normal so you can see 
the details in this figure. Note that it's really handy to be able to change font 
|^^ S a user ' ^ come Dac k to that idea later in this chapter. 

The generic fonts really are families of fonts: 

♦ Serif: These fonts have those little serifs (the tiny cross strokes that 
enhance readability). Print text (like the paragraph you're reading now) 
tends to use serif fonts, and they're the default font for most browsers. 
The most common serif typeface is Times New Roman or Times. 

♦ Sans-Serif: Sans serif fonts don't have the little feet. They're generally 
used for headlines or other emphasis. They're sometimes seen as more 
modern and clean than serif fonts, so sometimes they're used for body 
text. Arial is the most common sans-serif font. In this book, the figure 
captions use a sans serif font. 

♦ Cursive: These fonts look a little like handwriting. In Windows, the script 
font is usually Comic Sans MS. Script fonts are used when you want a 
less formal look. Dummies books use script fonts all over the place, for 
section and chapter headings. 



Figure 2-3: 

Here are all 
the generic 
fonts. 
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Generic Font Names 



• serif 

• sans-serif 

• cursive 

• monospace 
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Fantasy: Fantasy fonts are decorative. Just about any theme you can 
think of is represented by a fantasy font, from Klingon to Tolkien. You 
lso find fonts that evoke a certain culture, making English text appear 
Persian or Chinese. Fantasy fonts are best used sparingly, for 
emphasis, as they often trade readability for visual appeal.. 

♦ Monospace: Monospace fonts produce a fixed-width font like typewritten 
text. Monospace fonts are frequently used to display code. Courier is a 
common monospace font. 



Because the generic fonts are available on all standards-compliant browsers, 
you'd think you could use them confidently. Well, you can be sure they'll 
appear, but you still might be surprised. Figure 2-4 shows the same page (as 
shown in Figure 2-3 in Windows) in Linux. 
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Macs display yet another variation. This is because the fonts listed here aren't 
actual fonts. Instead, they're virtual fonts. A standards-compliant browser promises 
to put an appropriate stand in. For example, if you choose sans serif, one browser 
may choose to use Arial. Another may choose Chicago. You can always use these 
font names and know the browser can make something close, but there's no guar- 
antee exactly what font is chosen by the browser. Still, it's better than nothing. 
When you use these fonts, you can be assured that you get something in the right 
neighborhood, if not exactly what you intended. 
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Figure 2-4: 

Windows 
and Linux 
disagree on 
fantasy. 



Generic Font Names 



• serif 

• sans-serif 

• cursive 

• fantasy 

• monospace 



Setting the Font Family 



Making a list of fonts 

fThisuncertainty is frustrating, but you can take some control. You can specify 
fj kn §3ire list of font names if you want. The browser tries each font in turn. If it 
cah*Hind the specified font, it goes to the next and on down the line. 

You might choose a font that you know is installed on all Windows machines, 
a font found on Macs, and finally one found on all Linux machines. The last 
font on your list should be one of the generic fonts, so you'll have some con- 
trol over the worst-case scenario. 

Table 2-1 shows a list of fonts commonly installed on Linux, Mac, and 
Windows machines. 



Table 2-1 Font Equivalents 



Windows 


Mac 


Linux 




Arial 


Arial 


Nimbus Sans L 




Arial Black 


Arial Black 






Comic Sans MS 


Comic Sans MS 


TSCu_Comic 




Courier New 


Courier New 


Nimbus Mono L 




Georgia 


Georgia 


Nimbus Roman NoS 


L 


Lucida Console 


Monaco 






Palatino 


Palatino 


FreeSerif 




Tahoma 


Geneva 


Kalimati 




Times New Roman 


Times 


FreeSerif 




TrebuchetMS 


Helvetica 


FreeSans 




Verdana 


Verdana 


Kalimati 





You can use this chart to derive a list of fonts to try. For example, look at the 
following style: 

p ( 

font- family: "Trebuchet MS", Helvetica, FreeSans, sans-serif; 

} 

This style has a whole smorgasbord of options. First, the browser tries to load 
Trebuchet MS. If it's a Windows machine, this font is available, so that's the 
one that's displayed. If that doesn't work, the browser tries Helvetica (a default 
Mac font). If that doesn't work, it tries FreeSans, a font frequently installed on 
Linux machines. If this doesn't work, it defaults to the old faithful sans-serif, 
which simply picks a sans-serif font. 

Note that font names that take up more than one word must be encased in 
quotes, and the list of font names is separated by commas. 
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The death of the font tag 



tag in old-school HTML 
called the <f ont> tag. You could use this tag 
to change the size, color, and fontfamily. There 
were also specific tags for italicizing (<i>), 
making boldface (<fc»), and centering 
(<center>). These tags were very easy to 
use, but they caused some major problems. To 
use them well, you ended up littering your page 
with all kinds of tags trying to describe the 



markup, rather than the meaning. There was no 
easy way to reuse font information, so you 
often had to repeatthings manytimesthrough- 
out the page, making it difficult to change. 
XHTML strict, no longer allows the <f ont>, 
<i>, <b>, or <center> tags. The CSS ele- 
ments I show in this chapter more than com- 
pensate for this loss. You now have a more 
flexible, more powerful alternative. 
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Don't get too stressed about Linux fonts. It's true that the equivalencies are 
harder to find, but Linux users tend to fall into two camps: They either don't 
care if the fonts are exact, or they do care and they've installed equivalent 
fonts that recognize more common names. In either case, you can focus on 
Mac and Windows people for the most part, and, as long as you've used a 
generic font name, things work okay on a Linux box. 
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The Curse of WebSased Fonts 

Fonts seem pretty easy at first, but there are some big problems with actu- 
ally using them. 

Understanding the problem 

The problem with fonts is this: Font resources are installed in each operating 
system. They aren't downloaded with the rest of the page. Your Web page 
can call for a specific font, but that font isn't displayed unless it's already 
been installed on the user's computer. 

Let's say I have a cool font called Happygeek. (I just made that up. If you're a 
font designer, feel free to make a font called that. Just send me a copy. I can't 
wait.) It's installed on my computer, and when I choose a font in my word 
processor, it shows up in the list. I can create a word-processing document 
with it, and everything will work great. 

If I send a printout of a document using Happygeek to my grandma, every- 
thing's great because the paper doesn't need the actual font. It's just ink. If I 
send her the digital file and tell her to open it on her computer, we'll have a 
problem. See, she's not that hip and doesn't have Happygeek installed. Her 
computer will pick some other font. 
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This isn't a big problem in word processing because people don't generally 
send around digital copies of documents with elaborate fonts in them. However, 
jages are passed around only in digital form. In order to know which 
rou can use, you have to know what fonts are installed on the user's 
machine, and that's impossible. 

Part of the concern is technical (figuring out how to transfer the font infor- 
mation to the browser), but the real issue is digital rights management. If 
you've purchased a font for your own use, does that give you the right to 
transfer it to others, so now they can use it without paying? 

Examining possible solutions 

This has been a problem since the beginning of the Web. A lot of people have 
tried to come up with solutions. None of these solutions are good, but here 
are a few compromises: 

♦ Embedded fonts: Netscape and IE (Internet Explorer) both came up with 
techniques to embed fonts directly into a Web page. Both techniques 
involved using a piece of software to convert the font into a proprietary 
format that allows it to be used for the specific page and nothing else. 
The two systems were incompatible, and both were a little awkward. Almost 
nobody used them. Firefox now completely ignores this technology, and IE 
can do it but with a separate tool. Until browsers come up with a compati- 
ble solution, I don't recommend this technique. 

♦ CSS 3 embedded fonts: CSS 3 (the next version of CSS on the horizon) 
promises a way to import a font file purely through CSS. You'll be able to 
specify a particular filename and pass a URL (Uniform Resource Locator) 
to the file on your server, and it'll be used for that particular page but 
not installed on the user's system. This is the way custom fonts have 
been handled in games for years. Unfortunately, none of the top browsers 
are currently using this technique. If this system becomes standard, it 
will be the way to handle fonts. 

♦ Flash: Flash is a vector format very popular on the Web. Flash has very 
nice features for converting fonts to a binary format within the flash 
output, and most users have some kind of flash player installed. The 
Flash editor is expensive, somewhat challenging to figure out, and 
defeats many of the benefits of XHTML. These disadvantages outweigh 
the potential benefit of custom fonts. 

I'm certainly not opposed to using Flash. I just don't think it's a good 
idea to build entire Web pages in Flash, or to use Flash simply to get 
access to fonts. If you're interested in using Flash, you might want to 
check out another book I wrote, Flash Game Programming For Dummies 
(Wiley Publishing, Inc.). In this book, you'll learn how to make Flash liter- 
ally sing and dance. 
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Images: Some designers choose to forego HTML altogether and create 
their pages as huge images. This requires a huge amount of bandwidth, 
;s the pages impossible to search, and makes them difficult to 
Jify. This is a really bad idea. Although you have precise control of 
the visual layout, you lose most of the advantages of XHTML. Content in 
images cannot be read by search engines and is entirely inaccessible to 
people with screen readers. An image large enough to fill the screen will 
take many times longer to download than equivalent XHTML markup. 
The user cannot resize an image-based page, and this type of page does 
not scale well to phones or other portable browsers. 



Figure 2-5: 

The font 
shows up 
because it's 
an image. 



Using images for headlines 



Generally, you should use standard fonts for the page's main content 
anyway, so having a limited array of fonts isn't such a big problem. 
Sometimes, though, you want to use fonts in your headlines. You can use a 
graphical editor, like GIMP, to create text-based images and then incorporate 
them into your pages. Figure 2-5 shows an example of this technique. 
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Cows in History 



This page describes famous cows in history 



Battle of ' Cow 'pen 



Most people are unaware that cattle actually took part in the battle. They didn't 
of course. I just made that up. 
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In this case, I want to use my special cow font. (I love my cow font.) 
the process: 



. Plan your page. 

When you use graphics, you lose a little flexibility. You'll need to know 
exactly what the headlines should be. You also need to know what head- 
line will be displayed at what level. Rather than relying on the browser 
to display your headlines, you're creating graphics in your graphic tool 
(I'm using Gimp) and placing them directly in the page. 

2. Create your images. 

I used the wonderful Logos feature in GIMP (choose XtnsOScript-fuOlogos) 
to create my cow text. I built an image for each headline with the Bovination 
tool. I'm just happy to have a Bovination tool. It's something I've always 
wanted. 

3. Specify font sizes directly. 

In the image, it makes sense to specify font sizes in pixels because here 
you're really talking about a specific number of pixels. You're creating 
"virtual text" in your graphic editor, so make the text whatever size you 
want it to be in the finished page. 

If. Use any font you want. 

You don't have to worry about whether the user has the font because 
you're not sending the font itself, just an image composed with the font. 

5. Create a separate image for each headline. 

This particular exercise has two images — a level 1 heading and a level 2. 
Because I'm creating images directly, it's up to me to keep track of how 
the image will communicate its headline level. 

6. Consider the headline level. 

Be sure to make headline level 2 values look a little smaller or less 
emphasized than level 1. That is, if you have images that will be used in 
a heading 1 setting, they should use a larger font than images that will be 
used in a less emphasized heading level. This is usually done by adjust- 
ing the font size in your images. 

7. Build the page as you normally would. 

Once you have these specialty images created, build a regular Web page. 
Put <hl> and <h2> tags in exactly the same places you usually do. 

8. Put <img> tags inside the headings. 

Rather than ordinary text, place image tags inside the hi and h2 tags. 
See the upcoming code imageTitles . html if you're a little confused. 
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9. Put headline text in the alt attribute. 
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The^alt attribute is especially important here because if the user has 
hies turned off, the text still appears as an appropriately styled 
ling. People with slow connections see the text before the images 
load, and people using text readers can still read the image. 



Here's the code used to generate the image-based headers: 



<!DOCTYPE html PUBLIC " -/ /W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv=" content-type" content=" text/xml; charset=utf -8 " /> 

<title>imageTitles.html</title> Chapter 2 

</head> 



<body> 
<hl> 

<img sre = "cowsHistory.png" 

alt = "Cows in History" /> 

</hl> 
<P> 

This page describes famous cows in history 
</p> 



c/> 



CD 
X 



<h2> 

<img sre = " cowpens . png " 

alt = "Battle of Cowpens" /> 

</h2> 



<P> 

Most people are unaware that cattle actually took 
part in the battle. They didn't of course. I just 
made that up. 
</p> 



</body> 
</html> 



This technique is a pretty nice compromise between custom graphics and 
ordinary XHTML as follows: 

♦ You have great control of your images. If you're skilled with your 
graphics tool, you can make any type of image you want act as a head- 
line. There's literally no limit except your skill and creativity. 

♦ The page retains its structure. You still have heading tags in place, so 
it's easy to see that you mean for a particular image to act as a headline. 
You can still see the page organization in the XHTML code. 

♦ You have fallback text. The alt attributes will activate if the images 
can't be displayed. 
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♦ The semantic meaning of image headlines is preserved. The alt tags 
provide another great feature. If they replicate the image text, this text is 
ill available to screen readers and search engines, so the text is not 
ried in the image. 




This technique is great for headlines or other areas, but notice that I was care- 
ful to repeat the headline text in the alt tag. This is important because I don't 
want to lose the text. Search engine tools and screen readers need the text. 

Don't be tempted to use this technique for larger amounts of body text. 
Doing so causes some problems: 

♦ The text is no longer searchable. Search engines can't find text if it's 
buried in images. 

4- The text is harder to change. You can't update your page with a text editor. 
Instead, you have to download the image, modify it, and upload it again. 

♦ Images require a lot more bandwidth than text. Don't use images if 
they don't substantially add to your page. You can make the case for a 
few heading images, but it's harder to justify having your entire page 
stored as an image just to use a particular font. 



Specifying the Font Size 

Like font names, font sizes are easy to change in CSS, but there are some 
hidden traps. 

Size is oniy a suggestion! 

In print media, after you determine the size of the text, it pretty much stays 
there. The font size in print can't be changed easily by the user. By compari- 
son, Web browsers frequently change the size of text. A cell phone-based 
browser displays text differently than one on a high-resolution LCD panel. 
Further, most browsers allow the user to change the size of all the text on 
the screen. Use Ctrl++ (plus sign) and Ctrl+- (minus sign) to make the text 
larger or smaller. In older versions of IE (prior to IE7), use the Text Size 
option from the Page menu to change the text size. 

The user should really have the ability to adjust the font size in the browser. 
When I display a Web page on a projector, I often adjust the font size so stu- 
dents in the back can read. Some pages have the font size set way too small 
for me to read. (It's probably my high-tech monitor. It couldn't possibly have 
anything to do with my age.) 

Determining font sizes precisely is counter to the spirit of the Web. If you 
declare that your text will be exactly 12 points, for example, 1 of 2 things 
could happen: 
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♦ The browser might enforce the 12-point rule literally. This takes con- 
trol from the user, so users who need larger fonts are out of luck. Older 
ons of IE used to do this. 



user might still change the size. If this is how the browser behaves 
(and it usually is), 12 points doesn't always mean 12 points. If the user 
can change font sizes, the literal size selection is meaningless. 



The Web developer should set up font sizes, but only in relative terms. Don't 
bother using absolute measurements (in most cases) because they don't 
really mean what you think. Let the user determine the base font size and 
specify relative changes to that size. 

Using the font-size style attribute 

The basic idea of font size is pretty easy to grasp in CSS. Take a look at 
fontSize.html in Figure 2-6. 

This page obviously shows a number of different font sizes. The line "Font 
Sizes" is an ordinary hi element. All the other lines are paragraph tags. They 
appear in different sizes because they have different styles applied to them. 
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Figure 2-6: 

You can 
easily 
modify font 
sizes in your 
pages. 
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This paragraph is normal 
This paragraph is small 

This paragraph is half size 



This paragraph is double size 
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Font sizes are changed with the (cleverly named) font-size attribute: 

t-size: small; 
} 

Simply indicate the font-size rule, and, well, the size of the font. In this 
example, I used the special value small, but there are many other ways to 
specify sizes in CSS. 

Absolute measurement units 

A lot of times you need to specify the size of something in CSS. Of course, 
font size is one of these cases. The different types of measurement have dif- 
ferent implications. It's important to know there are two distinct kinds of 
units in CSS. Absolute measurements attempt to describe a particular size as 
in the real world. Relative measurements are about changes to some default 
value. In general, Web developers are moving toward relative measurement 
for font sizes. 

Points (pt) 

In word processing, you're probably familiar with points as a measurement of 
font size. You can use the abbreviation pt to indicate you're measuring in 
points, for example: 

P { 

font-size: 12pt; 

} 

Note that no space is between 12 and pt. 

Unfortunately, points aren't an effective unit of measure for Web pages. Points 
are an absolute scale, useful for print, but they aren't reliable on the Web 
because you don't know what resolution the user's screen has. A 12-point font 
might look larger or smaller on different monitors. 

In some versions of IE, after you specify a font size in points, the user can no 
longer change the size of the characters. This is unacceptable from a usabil- 
ity standpoint. Relative size schemes (which I describe later in this chapter) 
prevent this problem. 

Pixels (px) 

Pixels refer to the small dots on the screen. You can specify a font size in pixels, 
although it's not usually done. For one thing, different monitors make pixels in 
different sizes. You can't really be sure how big a pixel will be in relationship 
to the overall screen size. Different letters are different sizes, so the pixel 
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size is a rough measurement of the width and height of the average character. 
Use the px abbreviation to measure fonts in pixels: 



font-size: 20px; 
} 

Traditional measurements (in, cm) 

You can also use inches (in) and centimeters (cm) to measure fonts, but this 
is completely impractical. Imagine you have a Web page showing on your screen 
and also being displayed on a projection system. One inch on your own monitor 
may look like ten inches on the projector. Real-life measurement units aren't 
meaningful for the Web. The only time you might use them is if you'll be printing 
something and you have complete knowledge of how the printer is config- 
ured. If that's the case, you're better off using a real print-oriented layout 
tool than HTML. 

Relative measurement units 

Relative measurement is a wiser choice in Web development. Use these 
schemes to change sizes in relationship to the standard size. 

Named sizes 

CSS has a number of font size names built in: 

xx- small large 

x-small x-large 

small xx-large 



It may bother you that there's nothing more specific about these sizes: How 
big is large? Well, it's bigger than medium. That sounds like a flip answer, but 
it's the truth. The user sets the default font size in the browser (or leaves it 
alone), and all other font sizes should be in relation to this preset size. The 
medium size is the default size of paragraph text on your page. For compari- 
son purposes, <hl> tags are usually xx-large. 




medium 
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Percentage (°/o) 

— ^ — ^ .The percentage unit is a relative measurement. It's used to specify the font in 

J 1T\ 1"^ f*\ f*\ b^lJ^nship to its normal size. Use 50% to make a font half the size it would 

I v/ \J \J InViteRlly appear and 200/6 to make it twice the normal size. Use the % 

symbol to indicate percentage, as shown here: 

P { 

font-size: 150%; 

} 

Percentages are based on the default size of ordinary text, so an <hl> tag at 
100% is the same size as text in an ordinary paragraph. 

Em (em) 

In traditional typesetting, the em is a unit of measurement equivalent to the 
width of the "m" character in that font. In actual Web use, it's really another 
way of specifying the relative size of a font. For instance, 0.5 ems is half the 
normal size, and 3 ems is three times the normal size. The term em is used 
to specify this measurement. 

P ( 

font-size: 1 . 5em; 

} 

Here are the best strategies for font size: 

♦ Don't change sizes without a good reason. Most of the time, the 
browser default sizes are perfectly fine, but there may be some times 
when you want to adjust fonts a little more. 

♦ Define an overall size for the page. If you want to define a font size for 
the entire page, do it in the <body> tag. Use a named size, percentage, 
or ems to avoid the side effects of absolute sizing. The size defined in 
the body is automatically applied to every element in the body 

♦ Modify any other elements. You might want your links a little larger 
than ordinary text, for example. You can do this by applying a f ont- 
size attribute to an element. Use relative measurement if possible. 

Determining Other Font Characteristics 

In addition to size and color (see Chapter 1 of this minibook), you can 
change fonts in a number of other ways. 

Figure 2-7 shows a number of common text modifications you can make. 
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Figure 2-7: 

Here are a 
few of the 
things you 
can do to 
modify text. 
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This paragraph is centered. 

This paragraph is right-justified. 
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The various paragraphs in this page are modified in different ways. You can 
change the alignment of the text as well as add italic, bold, underline, or 
strikethrough to the text. 

CSS uses a potentially confusing set of rules for the various font manipulation 
tools. One rule is used for determining the font style, and another is used for 
boldness. 

Each of these techniques is described in the following sections for clarity. 

I used a trick I haven't shown yet to produce this comparison page. I have 
multiple paragraphs, each with their own style. Look to Chapter 3 of this mini- 
book to see how to have more than one paragraph style in a particular page. 

Using font-style for italics 

The font -style attribute allows you to make italic text, as shown in Figure 2-8. 



Here's some code illustrating how to add italic formatting: 



<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 
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Figure 2-8: 

You can 
make italic 
text with the 
font- style 
attribute. 



Italics 



r/?/s paragraph is hi italic form. 



<meta http-equiv="content-type" content^" text/xml; charset=utf- 
<title>italics .html</title> 
<style type = " text/ess "> 
P { 

font-style: italic; 

} 

</style> 
</head> 

<body> 

<hl>Italics</hl> 

<p>This paragraph is in italic form.</p> 
</body> 
</html> 



8" /> 



The font-style values can be italic, normal, or oblique (tilted toward 
the left). 

If you want to set a particular segment to be set to italic, normal, or oblique 
style, use the font -style attribute. 

Using font'U/eight for bold 

You can make your font bold by using the font-weight CSS attribute, as 
shown in Figure 2-9. 
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If you want to make some of your text bold, use the font-weight CSS 
attribute, like this: 



html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
www . w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns=''http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>bold.html</title> 
<style type = " text/ess "> 
P { 

font-weight: bold; 

} 

</style> 

</head> Book II 

Chapter 2 

<body> 

<hl>Boldface</hl> 
<P> 

This paragraph is bold. C/) 
</p> 

</body> = 

CO 

</html> _| 

Font weight can be defined in a couple ways. Normally, you simply indicate 
bold in the font-weight rule as I did in this code. You can also use a 
numeric value from 100 (exceptionally light) to 900 (dark bold). 
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Boldface 

This paragraph is bold. 



Figure 2-9: 

The font- 
weight 
attribute 
affects the 
boldness of 
your text. 
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Usinq text-decoration 

|""N ["^ iTexi^-decoration can be used to add a couple other interesting formats to 

1 \Cj fj f| fj fj pC^Rext, including underline, strikethrough. overline, and blink. 

For example, the following code produces an underlined paragraph: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>underline .html</title> 
<style type = " text/ess "> 
P { 

text-decoration: underline; 

} 

</style> 
</head> 

<body> 

<hl>Underline</hl> 
<p> 

This paragraph is underlined. 
</p> 

</body> 
</html> 

Be careful using underline in Web pages. Users have been trained that under- 
lined text is a link, so they may click your underlined text expecting it to take 
them somewhere. 

The underline .html code produces a page like Figure 2-10. 

You can also use text-decoration for other effects, like strikethrough, as 
shown in the following code: 




<!DOCTYPE html PUBLIC " -/ /W3C/ /DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv= " content-type" content="text/xml; charset=utf -8 " /> 
<title>strikethrough.html</ title> 
<style type = " text/ess "> 
P { 

text-decoration: line -through; 

) 

</style> 
</head> 
<body> 

<hl>Strikethrough< /hl> 

<p> 

This paragraph has strikethrough text. 
</p> 
</body> 
</html> 
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Figure 2-10: 

You can 
underline 
text with 
text- 
decoration. 
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The strikethrough.html code produces a page like Figure 2-11. 



Figure 2-11: 

Text- 
decoration 
can be used 
for a strike- 
through 
effect. 
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This paragraph has strikethrough text. 
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Text-decoration has a few other rarely-used options, such as: 

^verline: The overline attribute places a line over the text. Except for 
^few math and chemistry applications (which would be better done in 
an equation editor and imported as images), I can't see when this might 
be used. 

♦ Blink: The blink attribute is a distant cousin of the legendary <blink> 
tag in Netscape and causes the text to blink on the page. The <blink> 
tag (along with gratuitous animated GIFs) has long been derided as the 
mark of the amateur. Avoid blinking text at all costs. 




There's an old joke among Internet developers: The only place to legitimately 
use the <blink> tag is in this sentence: Schroedinger's cat is <blink>not 
</blink> dead. Nothing is funnier than quantum mechanics illustrated in 
HTML. 



Using, text-atign (or basic alignment 

You can use the text-align attribute to center, left-align, or right-align 
text, as shown in the following code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /KN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>center .html</title> 
<style type = " text/ess "> 
P { 

text-align: center; 

} 

</ stylo 
</head> 

<body> 

<hl>Centered</hl> 

<p>This paragraph is centered. </p> 

</body> 
</html> 

You can also use the text-align attribute to right- or left-justify your text. 
The page shown in Figure 2-12 illustrates the text-align attribute. 




You can apply the text-align attribute only to text. The old <center> tag 
could be used to center nearly anything (a table, some text, or images), which 
was pretty easy but caused problems. Book III explains how to position 
elements in all kinds of powerful ways, including centering anything. Use 



text-align to center text inside its own element (whether that's a heading, 
a paragraph, a table cell, or whatever). 
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Figure 2-12: 

This text is 
centered 
with text- 
align. 
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0f/ier text attributes 

CSS offers a few other text manipulation tools, but they're rarely used: 

♦ Font-variant: Can be set to small-caps to make your text use only 
capital letters. Lowercase letters are shown in a smaller font size. 

♦ Letter-spacing: Adjusts the spacing between letters. It's usually measured 
in ems (see the section, "Relative measurement units," earlier in the chap- 
ter for more on ems). Fonts are so unpredictable on the Web that if you're 
trying to micromanage this much, you're bound to be disappointed by the 
results. 

♦ Word-spacing: Allows you to adjust the spacing between words. 

♦ Text-indent: Lets you adjust the indentation of the first line of an element. 
This value uses the normal units of measurement. Indentation can be set 
to a negative value, causing an outdent if you prefer. 

♦ Vertical-align: Used when you have an element with a lot of vertical space 
(often a table cell). You can specify how the text behaves in this situation. 

♦ Text-transform: Helps you convert text into uppercase, lowercase, or 
capitalized (first letter uppercase) forms. 

♦ Line-height: Indicates the vertical spacing between lines in the element. 
Like letter and word spacing, you'll probably be disappointed if you're 
this concerned about exactly how things are displayed. 
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Usinq the font shortcut 

IIt_can be tedious to recall all the various font attributes and their possible 
1§S. Aptana and other dedicated CSS editors make it a lot easier, but there's 
oTner technique often used by the pros. The font rule provides an easy 
shortcut to a number of useful font attributes. The following code shows you 
how to use the font rule: 



<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf- 
<title>f ontTag.html</title> 
<style type = " text/ess "> 
P { 

font: bold italic 150% "Dadhand", cursive;; 

} 

</style> 
</head> 

<body> 

<hl>Using Font shortcut</hl> 
<p> 

This paragraph has many settings. 
</p> 

</body> 
</html> 

Figure 2-13 illustrates the powerful font rule in action. 
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Figure 2-13: 

The font rule 
can change 
many things 
at once. 
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This paragraph has many sef firms 
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The great thing about the font rule is how it combines many of the other 
font-related rules for a simpler way to handle most text-formatting needs. 



attribute is extremely handy Essentially it allows you to roll all 
the other font attributes into one. Here's how it works: 



♦ Specify the font rule in the CSS. 

♦ List any font -style attributes. You can mention any attributes normally 
used in the font-style rule (italic or oblique). If you don't want 
either, just move on. 

♦ List any font -variant attributes. If you want small caps, you can indi- Book (| 
cate it here. If you don't, just leave this part blank. Chapter 2 

♦ List any font -weight values. This can be "bold" or a font-weight 
number (100-900). 

♦ Specify the font-size value in whatever measurement system you want -5 
(but ems or percentages are preferred). Don't forget the measurement = 
unit symbol (em or %) because that's how the font rule recognizes that 

this is a size value. 2. 

♦ Indicate a font-family list last. The last element is a list of font families 
you want the browser to try. This list must be last, or the browser may 
not interpret the font attribute correctly. 



The font rule is great, but it doesn't do everything. You still may need sepa- 
rate CSS rules to define your text colors and alignment. These attributes 
aren't included in the font shortcut. 



Don't use commas to separate values in the font attribute list. Use commas 
only to separate values in the list of font-family declarations. 

You can skip any values you want as long as the order is correct. For example 



font: italic "Comic Sans MS", cursive; 



is completely acceptable, as is 



font: 70% sans-serif; 



Working With subscripts and superscripts 

Occasionally, you'll need superscripts (characters that appear a little bit higher 
than normal text, like exponents and footnotes) or subscripts (characters that 
appear lower, often used in mathematical notation). Figure 2-14 demonstrates 
a page with these techniques. 
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Figure 2-14: 

This page 
has 

superscripts 
and 

subscripts 
(and, ooooh, 
math!). 
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Surprisingly, you don't need CSS to produce superscripts and subscripts. 
These properties are managed through HTML tags. You can still style them 
like you can any other HTML tag. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>SuperSub.html</title> 
</head> 

<body> 
<p> 

A<sup>2</sup> + B<sup>2</sup> = C<sup>2</sup> 
</p> 

<p> 

i<sub>0</sub> = 0 
</p> 
</body> 
</html> 
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In This Chapter 

W Modifying specific named elements 

v* Adding and modifying emphasis and strong emphasis 

V Creating classes 

W Introducing spans and divs 

v 0 Using pseudo-classes and the link tag 

V Selecting specific contexts 
Defining multiple styles 

IX ou know how to use CSS to change all the instances of a particular tag, 

but what if you want to be more selective? For example, you might want 
to change the background color of only one paragraph, or you might want to 
define some special new type of paragraph. Maybe you want to specify a 
different paragraph color for part of your page, or you want visited links to 
appear differently from unselected links. The part of the CSS style that indi- 
cates what element you want to style is a selector. In this chapter, you discover 
powerful new ways to select elements on the page. 

Selecting Particular Segments 

Figure 3-1 illustrates how you should refer to someone who doesn't appreci- 
ate your Web development prowess. 

be fining more than one kind of paragraph 

Apart from its cultural merit, this page is interesting because it has three dif- 
ferent paragraph styles. The introductory paragraph is normal. The quote is 
set in italicized font, and the attribution is monospaced and right-aligned. 
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Figure 3-1: 

This page 
has three 
different 
kinds of 
paragraphs. 



Literature Quote of the Day 

How to tell somebody off the classy way: 

[Thou] leathern-jerkin, crystal-button, knot-pated, agate-ring, 
puke-stocking, caddis-garter, smooth-tongue, Spanish pouch! 

-William Shakespeare (Henry IV Part I) 
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The quote in the following code was generated by one of my favorite sites on 
the Internet: the Shakespearean insult generator. Nothing is more satisfying 
than telling somebody off in iambic pentameter. 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>guote.html</title> 
<style type = " text/ess "> 
#guote { 

font: bold italic 13 0% Garamond, fantasy; 
text-align: center; 

} 



♦attribution { 

font: 80% monospace; 
text-align: right; 

} 

</style> 
</head> 



<body> 

<hl>Literature Quote of the day</hl> 
<p> 

How to tell somebody off the classy way: 
</p> 
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<p id = " quote "> 

[Thou] leathern- jerkin, crystal-button, knot-pated, 
agatering, puke-stocking, caddis-garter, smooth- tongue, 
ish pouch! 



<p id = "attribution'^ 

-William Shakespeare {Henry IV Part I) 

</p> 



</body> 
</html> 



Stytina identified paragraphs 

Up to now, you've used CSS to apply a particular style to an element all 
across the page. For example, you can add a style to the p tag, and that style 
applies to all the paragraphs on the page. 

Sometimes (as in the Shakespeare insult page) you want to give one element 
more than one style. You can do this by naming each element and using the 
name in the CSS style sheet. Here's how it works: 

/. Add an id attribute to each HTML element you want to modify. 

For example, the paragraph with the attribution now has an id attribute 
with the value attribution. 

<p id = "attributions 

2. Make a style in CSS. 

Use a pound sign followed by the element's ID in CSS to specify you're 
not talking about a tag type any more, but a specific element: For exam- 
ple, the CSS code contains the selector #attribution meaning "apply 
this style to an element with the attribution id." 

#attribution { 

3. Add the style. 

Create a style for displaying your named element. In this case, I want the 
paragraph with the attribution id to be right-aligned, monospace, 
and a little smaller than normal. This style will be attached only to the 
specific element. 

#attribution { 

font: 80% monospace; 
text-align: right; 

} 
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The ID trick works great on any named element. IDs have to be unique (you 
can't repeat the same ID on one page), so this technique is best when you 
style you want to apply to only one element on the page. It doesn't 
what HTML element it is (it could be an hi, a paragraph, a table cell, 
or whatever). If it has the ID quote, the #quote style will be applied to it. 
You can have both ID selectors and ordinary (element) selectors in the same 
style sheet. 
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You may be shocked to know that XHTML doesn't allow italics or bold. Old- 
style HTML had the <i> tag for italics and the <b> tag for bold. These seem 
pretty easy to use and understand. Unfortunately, they can trap you. In your 
XHTML, you shouldn't specify how something should be styled. You should 
specify instead the purpose of the styling. The <i> and <b> tags are removed 
from XHTML Strict and replaced with <em> and <strong>. 

Adding emphasis to the page 

The <em> tag means emphasized. By default, em italicizes your text. The 
<strong> tag stands for strong emphasis. It defaults to bold. 

Figure 3-2 illustrates a page with the default styles for em and strong. 



Figure 3-2: 

You can use 
em and 
strong to 
add 

emphasis. 
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Emphasis and Strong Emphasis 

This paragraph illustrates two main kinds of emphasis. Tliis sentence uses the em tag. By default, 
emphasis is italic. This sentence uses strong emphasis. The default formatting of strong emphasis is 
bold. 

Of course you can change the formatting with CSS. This is a great example of semantic formatting. 
Rather than indicating the formatting of some text, you indicate how much it is emphasized. 

This way, you can go back and change things, like adding color to emphasized text without the 
formatting commands muddying your actual text. 
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The code for the emphasis .html page is pretty straightforward. It has no 
CSS at all: 

html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
//www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>emphasis .html</title> 
</head> 
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<body> 

<hl>Emphasis and Strong Emphasis</hl> 
<P> 

This paragraph illustrates two main kinds of emphasis. Book II 

<em>This sentence uses the em tag.</em> Chapter 3 

By default, emphasis is italic. 

<strong>This sentence uses strong emphasis . </strong> 
The default formatting of strong emphasis is bold. 



</p> 
<p> 

Of course you can change the formatting with CSS 
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This is a great example of <em>semantic</em> formatting. <D — 

Rather than indicating the <strong>formatting</strong> w 
of some text, you indicate <strong>how much it is emphasized. </strong> 



</p> 



<P> 

This way, you can go back and change things, like adding color 
to emphasized text without the formatting commands 
muddying your actual text. 
</p> 
</body> 
</html> 



It'd be improper to think that em is just another way to say italic and strong 
is another way to say bold. In the old scheme, after you define something as 
italic, you're pretty much stuck with that. The XHTML way describes the 
meaning, and you can define it however you want. 

Modifying the display of em and strong 

Figure 3-3 shows how you might modify the levels of emphasis. I used yellow 
highlighting (without italics) for em and a larger red font for strong. 

The code for emphasisStyle . html (as shown in Figure 3-3) is identical to 
the code for emphasis .html (as shown in Figure 3-2). The only difference is 
the addition of a style sheet. The style sheet is embedded in the Web page 
between style tags. Check out Chapter 1 of this minibook for a refresher on 
how to incorporate CSS styles in your Web pages. 
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<style type = " text/ess "> 
em { 

font-style: normal; 
background-color: yellow; 




strong { 

color: red; 
font-size: 110%; 

} 

</style> 

The style is used to modify the XHTML. The meaning in the XHTML stays the 
same — only the style changes. 

The semantic markups are more useful than the older (more literal) tags 
because they still tell the truth even if the style has been changed. (In the 
XHTML code, the important thing is whether the text is emphasized, not 
what it means to emphasize the text. That job belongs to CSS.) 

What's funny about the following sentence? 

<strong> is always bold. 

Get it? That's a bold-faced lie! Sometimes I crack myself up. 
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Emphasis and Strong Emphasis 

This paragraph illustrates two main kinds of emphasis. This sentence uses the em tag. By default, 
emphasis is italic. This sentence uses strong emphasis. The default formatting of strong emphasis is 
bold. 

Of course you can change the formatting with CSS. This is a great example of semantic formatting. 
Rather than indicating the formatting of some text, you indicate how much it is emphasized. 

This way, you can go back and change things, like adding color to emphasized text without the 
formatting commands muddying your actual text. 



Figure 3-3: 

You can 
change the 
way that em 
and strong 
modify text. 
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asily apply a style to all the elements of a particular type in a page, 
times you might want to have tighter control of your styles. For 
example, you might want to have more than one paragraph style. As an 
example, take a look at the classes . html page featured in Figure 3-4. 



Once again, multiple formats are on this page: 

♦ Questions have a large italic sans serif font. There's more than one 
question. 

♦ Answers are smaller, blue, and in a cursive font. There's more than 
one answer, too. 

Questions and answers are all paragraphs, so you can't simply style the para- 
graph because you need two distinct styles. There's more than one question 
and more than one answer, so the ID trick would be problematic. Two different 
elements can't have the same ID — you don't want to create more than one 
identical definition. This is where the notion of classes comes into play. 



Figure 3-4: 

Each joke 
has a 
question 
and an 
answer. 



file Edit View rtstory Bookmarks lods Help 



• - ^ {\ ^ | u r ^ :; ,. x '3.(Te&iostia.com/ifd:.3/daffles.i 



My five-year-old's favorite jokes 

What kind of cow lives in the Arctic? 

What goes on top of a dog house? 



An Eskimoo! 



The woof! 
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Adding classes to the paqe 

CSSjillows you to define classes in your XHTML and make style definitions 
aSye applied across a class. It works like this: 

/. Add the class attribute to your XHTML questions. 

Unlike ID, several elements can share the same class. All my questions 
are defined with this variation of the <p> tag. Setting the class to ques- 
tion indicates these paragraphs will be styled as questions: 

<p class = "question"> 

What kind of cow lives in the Arctic? 
</p> 

2. Add similar class attributes to the answers by setting the class of the 
answers to answer: 

<p class = "answer"> 
An Eskimoo ! 

</p> 

Now you have two different subclasses of paragraph: question and 
answer. 

3. Create a class style for the questions. 

The class style is defined in CSS. Specify a class with the period (.) 
before the class name. Classes are defined in CSS like this: 

<style type = "text/css"> 
.question { 

font: italic 150% arial, sans-serif; 
text-align: left; 

} 

In this situation, the question class is defined as a large sans-serif font 
aligned to the left. 

4. Define the look of the answers. 

The answer class uses a right-justified cursive font. 

. answer { 

font: 120% "Comic Sans MS", cursive; 
text-align: right; 
color: #00F; 

} 

</style> 

Combining classes 

Here's the code for the classes . html page, showing how to uses CSS 
classes: 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<h|ml lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 



I http-equiv= " content- type " content="text/xml; charset=utf- 
<ti!T±e>classes .html</title> 
<style type = "text/css"> 
.question { 

font: italic 150% arial, sans-serif; 
text-align: left; 

} 



I" /> 




. answer { 

font: 120% "Comic Sans MS", cursive; 
text-align: right; 
color: #00F; 

} 

</style> 
</head> 

<body> 

<hl>My five-year-old's favorite jokes</hl> 

<p class = "question"> 

What kind of cow lives in the Arctic? 
</p> 

<p class = " answer "> 

An Eskimoo! 
</p> 

<p class = "question"> 

What goes on top of a dog house? 
</p> 

<p class = " answer "> 

The woof ! 
</p> 
</body> 
</html> 

Sometimes you see selectors, like 

p . fancy 
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that include both an element and a class name. This style will be applied 
only to paragraphs with the fancy class attached. Generally, I like classes 
because they can be applied to all kinds of things, so I usually leave the ele- 
ment name out to make the style as reusable as possible. 

Combining classes 

One element can use more than one class. Figure 3-5 shows an example of 
this phenomenon 



m Defining Classes 



The paragraphs in Figure 3-5 appear to be in three different styles, but only red 
and script are defined. The third paragraph uses both classes. Here's the code: 

PE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
/www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>redScript .html</title> 
<style type = " text/ess "> 
.red { 

color: white; 

background-color: red; 

} 




.script { 

font-family: cursive; 

} 

</style> 
</head> 



<body> 

<hl>Multiple Classes</hl> 
<p class = "red"> 

This paragraph uses the red class 
</p> 

<p class = 11 script "> 

This paragraph uses the script class 
</p> 



^ redScript.html - Mozilla Firefox 
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Multiple Classes 

as 

This paragraph uses the script class 



This paraqraph uses both classes 



Figure 3-5: 

There's red, 
there's 
script, and 
then there's 
both. 
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<p class = "red script "> 

This paragraph uses both classes 
</p> 




The style sheet introduces two classes. The red class makes the paragraph 
red (well, white text with a red background), and the script class applies a 
cursive font to the element. 

The first two paragraphs each have a class, and they act as you'd expect. 
The interesting part is the third paragraph, as it has two classes. 

<p class = "red script "> 

This assigns both the red and script classes to the paragraph. Both styles 
will be applied to the element in the order they are written. Note that both 
class names occur inside quotes and no commas are needed (or allowed). 
You can apply more than two classes to an element if you wish. If the classes 
have conflicting rules (say one makes the element green and the next makes 
it blue), the latest class in the list will overwrite earlier values. 

An element can also have an ID. The ID style, the element style, and all the class 
styles are taken into account when the browser tries to display the object. 

Normally I don't like to use colors or other specific formatting instructions 
as class names. Usually, it's best to name classes based on their meaning 
(like mainColorScheme). You might decide that green is better than red, so 
you either have to change the class name or you have to have a red class 
that colored things green. That'd be weird. 
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Introducing div and span 

So far, I've applied CSS styles primarily to paragraphs (with the p tag), but 
you can really use any element you want. In fact, you may want to invent 
your own elements. Perhaps you want a particular style, but it's not quite a 
paragraph. Maybe you want a particular style inside a paragraph. XHTML 
has two very useful elements that are designed as generic elements. They 
don't have any predefined meaning, so they're ideal candidates for modifica- 
tion with the id and class attributes. 

♦ div: A block-level element Qike the p element). It acts just like a paragraph. 
A div usually has carriage returns before and after it. Generally, you use 
div to group a series of paragraphs. 
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♦ <span>: An inline element. It doesn't usually cause carriage returns 
because it's meant to be embedded into some other block-level element 
sually a paragraph or a div). A span is usually used to add some type 
special formatting. 



Orqanizinq the paqe by meaning 

To see why div and span are useful, take a look at Figure 3-6. 

The formatting of the page isn't complete (read about positioning CSS in 
Book III), but some formatting is in place. Each name and phone number pair 
is clearly a group of things. Names and phone numbers are formatted differ- 
ently. The interesting thing about this page is the code: 

<!DOCTYPE html PUBLIC " -/ /W3C/ /DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>divSpan.html</title> 
<style type = " text/ess "> 
. contact { 
background-color: #CCCCFF; 

} 

.name { 

font: italic 110% arial, sans-serif; 
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Figure 3-6: 

This page 
has names 
and phone 
numbers. 
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Andy 111-1111 
Elizabeth 222-2222 
Matthew 333-3333 
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font: 100% monospace; 
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<body> 

<div class = 1 
<span class 
<span class 

</div> 

<div class = 1 
<span class 
<span class 

</div> 

<div class = 1 
<span class 
<span class 

</div> 



contact "> 

= " name " >Andy< / span> 

= "phone">lll-llll</span> 



contact "> 

= "name">Elizabeth</span> 
= "phone">222-2222</span> 



contact "> 

= "name">Matthew</span> 
= "phone">333-3333</span> 



</body> 
</html> 

What's exciting about this code is its clarity. When you look at the XHTML, 
it's very clear what type of data you're talking about because the structure 
describes the data. Each div represents a contact. A contact has a name and 
a phone number. 

The XHTML doesn't specify how the data is displayed, just what it means. 
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Why not make a table) 



This is where experienced HTML 4 people shake their heads in disbelief. 
This page seems like a table, so why not make it one? What matters here 
isn't that the information is in a table, but that names and phone numbers 
are part of contacts. There's no need to bring in artificial table elements if 
you can describe the data perfectly well without them. 



If you still want to make the data look like a table, that's completely possible, 
as shown in Figure 3-7. See Book III to see exactly how some of the styling 
code works. Of course, you're welcome to look at the source code for this 
styled version (dubbed divSpanStyled.html on the CD-ROM) if you want 
a preview. 

The point is this: After you define the data, you can control it as much as 
you want. Using span and div to define your data gives you far more control 
than tables and leaves your XHTML code much cleaner. 
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Figure 3-7: 

After you 
define the 
data, you 
can style it 
as a table if 
you want. 
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div and span aren't simply a replacement for tables. They're tools for organiz- 
ing your page into segments based on meaning. After you have them in place, 
you can use CSS to apply all kinds of interesting styles to the segments. 



Using Pseudo-Classes to Style Links 

Now that you have some style going in your Web pages, you may be a bit 
concerned about how ugly links are. The default link styles are useful, but 
they may not fit with your color scheme. 



Stylinq a standard link 

It's easy enough to add a style to a link. After all, <a> (the tag that defines 
links) is just an XHTML tag, and you can add a style to any tag. Here's an 
example, where I make my links black with a yellow background: 



a { 

color: black; 
background-color: yellow; 

} 



That works fine, but links are a little more complex than some other ele- 
ments. Links actually have three different states: 
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♦ Normal: This is the standard state. With no CSS added, most browsers 
display unvisited links as blue underlined text. 



:ed: This state is enabled when the user has visited a link and 
ned to the current page. Most browsers use a purple underlined 
style to indicate that a link has been visited. 



♦ Hover: The hover state is enabled when the user's mouse is lingering 
over the element. Most browsers don't use the hover state in their 
default settings. 

If you apply a style to the <a> tags in a page, the style is applied to all the 
states of all the anchors. 

Styiina the link states 

You can apply a different style to each state, as illustrated by Figure 3-8. In 
this example, I make ordinary links black on a white background. A link that 
has been visited is black on yellow, and, if the mouse is hovering over a link, 
it is white with a black background. 

Take a look at the code and see how it's done: 
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Figure 3-8: 

Links can 
have three 
states: 
normal, 
visited, and 
hover. 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
Khtml lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 



ita http-equiv="content-type" content="text/xml; charset=utf-8 " /> 



color: black; 
background-color: white; 

} 

a: visited { 
color: black; 

background-color: #FFFF33 ; 

} 

a : hover { 

color: white; 
background-color: black; 

} 

</style> 
</head> 

<body> 

<hl>Pseudo-classes and links</hl> 



<a href = "http: //www. google. com">This link is normal</a> 
</p> 



<a href = "http: //www. reddit . com" >This link has been visited</a> 
</p> 

<p> 

<a href = "http: //www. digg.com">The mouse is hovering over 
this link</a> 
</p> 

</body> 
</html> 

Nothing is special about the links in the HTML part of the code. The links 
change their state dynamically while the user interacts with the page. The 
style sheet determines what happens in the various states. Here's how you 
approach putting the code together: 

♦ Determine the ordinary link style first by making a style for the <a> tag. 

If you don't define any other pseudo-classes, all links will follow this style. 

♦ Make a style for visited links. A link will use this style if that site has been 
visited during the current browser session. The a : visited selector indi- 
cates links that have been visited. 

♦ Make a style for hovered links. The a : hover style will be applied to 
the link only when the mouse is currently hovering over the link. As 
soon as the mouse leaves the link, the style reverts back to standard or 
visited, as appropriate. 




<title>linkStates .html</title> 
<style type = "text/ess" > 
a{ 



<p> 



<p> 
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list: 



♦ The order is important. Be sure to define the ordinary anchor first. The 
pseudo-classes are based on the standard anchor style. 

♦ Make sure they still look like links. It's important that users know 
something is intended to be a link. If you take away the underlining and 
the color that normally indicates a link, your users might be confused. 
Generally, you can change colors without trouble, but links should either 
be underlined text or something that clearly looks like a button. 

♦ Test visited links. Testing visited links is a little tricky because, after you 
visit a link, it stays visited. If you have the Web Developer toolbar installed 
on Firefox, you can choose the MiscellaneousOVisited Links command 
to mark all links as visited or unvisited. In IE, choose ToolsODelete 
Browsing History and then select the Delete History button. You then 
need to refresh the page for the change to take effect. 

♦ Don't change font size in a hover state. Unlike most styles, hover 
changes the page in real time. A hover style with a different font size 
than the ordinary link can cause problems. The page is automatically 
reformatted to accept the larger (or smaller) font, which can move a 
large amount of text on the screen rapidly. This can be frustrating and 
disconcerting for users. It's safest to change colors or borders on hover 
but not the font family or font size. 




The hover pseudo-class is supposed to be supported on other elements, but 
browser support is spotty. You can define a hover pseudo-class for div and <p> 
elements with some confidence if users are using the latest browsers. Earlier 
browsers are less likely to support this feature, so don't rely on it too much. 



Selecting in Context 

CSS allows some other nifty selection tricks. Take a look at Figure 3-9 and 
you see a page with two different kinds of paragraphs in it. 



The code for the context-style . html page is deceptively simple: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>context-style</title> 
<style type = " text/ess "> 
♦special p { 
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This paragraph is left-justified. 



This paragraph is left-justified. 



This paragraph is left-justified. 



The paragraphs in this div are different. 



The paragraphs in this div are different. 



Figure 3-9: 



The paragraphs in this div are different. 



Obviously 
two kinds of 
paragraphs 
are here — 
or are 
there? 



text-align: right; 

} 

</style> 
</head> 

<body> 

<hl>Selecting By Context</hl> 

<div> 

<p>This paragraph is left- justified. </p> 
<p>This paragraph is lef t-justif ied. </p> 
<p>This paragraph is lef t-justif ied. </p> 

</div> 

<div id = " special "> 

<p>The paragraphs in this div are dif f erent . </p> 
<p>The paragraphs in this div are dif f erent . </p> 
<p>The paragraphs in this div are dif f erent . </p> 
</div> 
</body> 
</html> 



If you look at the code for context-style . html, you see some interesting 
things: 

♦ The page has two divs. One div is anonymous, and the other is special. 

♦ None of the paragraphs has an ID or class. The paragraphs in this page 
don't have names or classes defined, yet they clearly have two different 
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types of behavior. The first three paragraphs are aligned to the left, and 
the last three are aligned to the right. 



tyle rule affects paragraphs inside the special div. Take 
er look at the style: 

#special p { 



This style rule means apply this style to any paragraph appearing inside 
something called special. You can also define a rule that could apply 
to an image inside a list item or emphasized items inside a particular 
class. When you include a list of style selectors without commas, you're 
indicating a nested style. 

♦ Paragraphs defined outside special aren't affected. This nested 
selection technique can help you create very complex style combina- 
tions. It becomes especially handy when you start building positioned 
elements, like menus and columns. 



Defining Multiple Styles at Once 



Sometimes you want a number of elements to share similar styles. As an 
example, look at Figure 3-10. 
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Figure 3-10: 

H1,H2,and 
H3 have 
similar style 
rules. 
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In this illustration, the top three headings all have very similar styles. 
Creating three different styles would be tedious, so CSS includes a shortcut: 

PE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
/www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>multiStyle .html</title> 
<style type = " text/ess "> 
hi, h2, h3 { 

text-align: center; 

font-family: "Bradley Hand ITC", cursive; 
background-color: yellow; 

} 

h3 { 

font-family: monospace; 

} 

</style> 
</head> 

<body> 

<hl>Hl Heading</hl> 

<h2>H2 Heading</h2> 

<h3>H3 Heading</h3> 
</body> 
</html> 

One style element (the one that begins hi, h2, h3) provides all the information 
for all three heading types. If you include more than one element in a style 
selector separated by commas, the style applies to all the elements in the list. 
In this example, the centered cursive font with a yellow background is applied 
to headings level 1, 2, and 3 all in the same style. 

If you want to make modifications, you can do so. I created a second h3 rule, 
changing the font- family attribute to monospace. Style rules are applied 
in order, so you can always start with the general rule and then modify 
specific elements later in the style if you wish. 




Remember, if you have multiple elements in a selector rule, it makes a huge 
difference whether you use commas. If you separate elements with spaces 
(but no commas), CSS looks for an element nested within another element. If 
you include commas, CSS applies the rule to all the listed elements. 
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In This Chapter 

V Creating borders 

Managing border size, style, and color 
w Using the border shortcut style 
W Understanding the box model 
v 0 Setting padding and margin 
w Creating background and low-contrast images 
w Changing background image settings 

Adding images to list items 

CSS offers some great features for making your elements more colorful. It 
has a flexible and powerful system for adding borders to your elements. 
You can also add background images to all or part of your page. This chapter 
describes how to use borders and backgrounds for maximum effect. 



Joining the Border Patrol 

You can use CSS to draw borders around any HTML element. You have some 
freedom in the border size, style, and color. Here are two main ways to define 
border properties — using individual border attributes and using a shortcut. 
Borders don't actually change the layout, but they do add visual separation 
that can be appealing, especially as your layouts get more complex. 

Using the border attributes 

Figure 4-1 illustrates a page with a simple border drawn around the heading. 
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Figure 4-1: 

This page 
features a 
double red 
border. 



The code for the borderProps .html page demonstrates the basic princi- 
ples of borders in CSS: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>borderProps .html</title> 
<style type = " text/ess "> 
hi { 

border-color: red; 
border-width: . 25em; 
border-style: double; 

} 

</style> 
</head> 

<body> 

<hl>This has a border</hl> 
</body> 
</html> 
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Each element can have a border defined. Borders require three attributes: 
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h: The width of the border. This can be measured in any CSS unit, 
order width is normally described in pixels (px) or ems. (Remember, 
an em is roughly the width of the capital letter "M" in the current font.) 




♦ color: The color used to display the border. The color can be defined 
like any other color in CSS, with color names or hex values. 

♦ style: CSS supports a number of border styles. These are described in 
the upcoming section. For this example, I chose a double border. This 
draws a border with two thinner lines around the element. 

You must define all three attributes if you want borders to appear properly. You 
can't rely on the default values to work in all browsers. 

defining border styles 

After you have the three attributes defined, it's time to pick your border 
style. CSS has a predetermined list of border styles you can choose from. 
Figure 4-2 shows a page with all the primary border styles displayed. 
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Figure 4-2: 

This page 
shows the 
main border 
styles. 
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♦ |solid 


1 


• ||double 


1 


• groove 


1 




♦ ji'idge 


• Jinset 






• outset 


• jdashed 






• Idotted 
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You can choose any of these styles for any border: 
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lid: A single solid line around the element. 




uble: Two lines around the element with a gap between them. The 
border width is the combined width of both lines and the gap. 

♦ Groove: Uses shading to simulate a groove etched in the page. 

♦ Ridge: Uses shading to simulate a ridge drawn on the page. 

♦ Inset: Uses shading to simulate a pressed-in button. 

♦ Outset: Uses shading to simulate a button sticking out from the page. 

♦ Dashed: A dashed line around the element. 

♦ Dotted: A dotted line around the element. 

I didn't reprint the source of borderStyles . html here, but it's included on 
the CD-ROM and Web site if you want to look it over. I added a small margin 
to each list item to make the borders easier to distinguish. Margins are dis- 
cussed later in this chapter in the section, "Borders, margin, and padding." 



Shades of danger 



Several of the border styles rely on shading to 
produce special effects. Here are a couple 
things to keep in mind when using these 
shaded styles: 

V You'll need a wider border. The shading 
effects are typically difficult to see if the 
border is very thin. 

f Browsers shade differently. All the shad- 
ing tricks modify the base color (the color 
you indicate with the border-color 
attribute) to simulate depth. Unfortunately, 
the browsers don't all do this in the same 
way. The Firefox/Mozilla browsers create a 
new color lighter than the base color to 
simulate areas in the light (the top and left 



sides of an outset border, for example). 
Internet Explorer (IE) uses the base color 
forthe lighter regions and creates a darker 
shade to simulate areas in darkness. I 
show a technique to define different color 
schemes for each browser in Chapter 5 of 
this minibook. For now, avoid shaded styles 
if this bothers you. 

o* Black shading doesn't work on IE. IE 

makes colors darker to get shading effects. 
If your base color is black, IE can't make 
anything darker, so you don't see the shad- 
ing effects at all. Likewise, white shading 
doesn't work well on Firefox. 
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Using the border shortcut 

Defining three different CSS attributes for each border is a bit tedious. 
JoJ^S3ely, CSS includes a handy border shortcut that makes borders a lot 
"ealierTO define, as Figure 4-3 demonstrates. 



You can't tell the difference from the output, but the code for 
borderShortcut . html is extremely simple: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : / /www. w3 . org/TR/xhtmll/DTD/xhtmll-strict . dtd" > 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf- 
<title>borderShortcut .html</title> 
<style type = " text/ess "> 

hi { 

border: red 5px solid; 

} 

</style> 
</head> 

<body> 

<hl>This page uses the border shortcut</hl> 
</body> 
</html> 
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Figure 4-3: 

This border 
is defined 
with only 
one CSS 
rule. 



He Edt vew Hstorv Bcctanarks look Help 



<^ • - ^ LI fte:A'.'C::P.osra^° I ;0File^>amso ; htdocs:>fa>fd2/»fti2.4 < torderax ytaithtiTil 



• » CI- 



This page uses the border shortcut 



^ 0 errors / 0 warnings Q f Now: Clear, 31 C F 



wed:92°F . _. -i!u:3: : F fc 



210 Joining the Border Patrol 



DropBoofe 



The order in which you describe border attributes doesn't matter. Specify a 
color, a size, and a border style. 



ting partial borders 

If you want, you can have more precise control of each side of a border. 
There are actually a number of specialized border shortcuts for each of the 
sub-borders. Figure 4-4 shows how you can add borders to the top, bottom, 
or sides of your element. 

Figure 4-4 applies a border style to the bottom of the hi and to the left side 
of the paragraph. Partial borders are pretty easy to build, as you can see 
from the code listing: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>subBorders .html</title> 
<style type = " text/ess "> 
hi { 

border-bottom: 5px black double; 

} 



(8- subBorders.html - Mozilla Firefox l-I" 1 ]^ 
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This heading has a bottom border 



[Paragraphs have several borders defined. 



[Paragraphs have several borders defined. 



Figure 4-4: 

You can 
specify 
parts of your 
border if you 
want. 
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p { 

border-left : 3px black dotted; 
border-right: 3px black dotted; 
rder-top: 3px black dashed; 
rder -bottom: 3px black groove; 



</style> 
</head> 



<body> 

<hl>This heading has a bottom border</hl> 



Paragraphs have several borders defined. 
</p> 

Book II 
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Paragraphs have several borders defined. 
</p> 
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Notice the border styles. CSS has style rules for each side of the border: 
border-top, border-bottom, border-left, and border-right. Each of these styles 
acts like the border shortcut, but it only acts on one side of the border. 

There's also specific border attributes for each side (bottom-border- 
width), but they're almost never used because the shortcut version is so 
much easier. 



Introducing the Box Model 

XHTML and CSS use a specific type of formatting called the box model. 
Understanding how this layout technique works is important. If you don't under- 
stand some of the nuances, you'll be surprised by the way your pages flow. 

The box model relies on two main types of elements, inline and block-level. 
<div> tags, paragraphs, and all headings (hl-h6) are examples of block- 
level elements, whereas strong, a, and image are examples of inline elements. 
Each type of element defines a rectangular box on the screen. 

The main difference between inline and block-level elements is this: Block- 
level elements always describe their own space on the screen, whereas 
inline elements are allowed only within the context of a block-level element. 

Your overall page is defined in block-level elements, which contain inline 
elements for detail. 
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Each block-level element (at least in the default setting) takes up the entire 
width of the screen. The next block-level element goes directly underneath 
element defined. 



Inline elements flow differently. They tend to go immediately to the right of 
the previous element. If there's no room left on the current line, an inline 
element drops down to the next line and goes to the far left. 

Borders, margin, and paddina 

Each block-level element has several layers of space around it, such as: 

♦ Padding: The space between the content and the border. 

♦ Border: Goes around the padding. 

♦ Margin: Space outside the border between the border and the parent 
element. 



Figure 4-5 shows the relationship among margin, padding, and border. 

You can change settings for the margin, border, and padding to adjust the 
space around your elements. The margin and padding CSS rules are used 
to set the sizes of these elements, as shown in Figure 4-6. 





Margin 


Padding 






Content 






Figure 4-5: 








Margin is 
outside the 








border; 
padding is 
inside. 
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Figure 4-6: 

Margins 
and padding 
affect the 
positioning 
of an 
element. 
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This paragraph has padding but no margin 



This pargraph has a margin and padding 
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In Figure 4-6, 1 applied different combinations of margin and padding to a 
series of paragraphs. To make things easier to visualize, I drew a border 
around the <div> containing all the paragraphs and each individual para- 
graph element. You can see how the spacing is affected. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>marginPadding . html</ title> 
<style type = " text/ess "> 
div { 

border: red 5px solid; 

} 

P 1 

border: black 2px solid; 

} 

#margin { 

margin : 5px ; 

} 

#padding { 

padding: 5px; 

} 

#both { 

margin : 5px ; 
padding : 5px ; 

} 

</style> 
</head> 
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<body> 

<hl>Margins and padding</hl> 
v id = "main"> 

p>This paragraph has the default margins and padding</p> 
p id = "margin" >This paragraph has a margin but no padding</p> 
p id = "padding">This paragraph has padding but no margin</p> 
<p id = "both">This paragraph has a margin and padding</p> 
</div> 
</body> 
</html> 

You can determine margin and padding using any of the standard CSS meas- 
urement units, but the most common are pixels and ems. 
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Positioning elements With margins and padding 

As with borders, you can use variations of the margin and padding rules to 
affect spacing on a particular side of the element. One particularly important 
form of this trick is centering. 

In old-style HTML, you could center any element or text with the <center> 
tag. This was pretty easy, but it violated the principle of separating content 
from style. The text-align: center rule is a nice alternative, but it only 
works on the contents of an element. If you want to center an entire block- 
level element, you need another trick, as you can see in Figure 4-7. 



Figure 4-7: 

Using 
margins to 
adjust 
positioning. 
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Centering 



This paragraph is part of the centered main body. 

This paragraph is indented to the right. 
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This page illustrates a few interesting ideas: 
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can adjust the width of a block. The main div that contains all the 
raphs has its width set to 75 percent of the page body width. 



Center an element by setting margin-left and margin-right to 
auto. Set both the left and right margins to auto to make an element 
center inside its parent element. This trick is most frequently used to 
center divs and tables. 

Use margin-left to indent an entire paragraph. You can use margin- 
left or margin-right to give extra space between the border and the 

contents. „ , „ 

Book II 

Percentages refer to percent of the parent element. When you use per- Chapter 4 
centages as the unit measurement for margins and padding, you're refer- 
ring to the percentage of the parent element; so a margin-left of 50 
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Borders help you see what's happening. I added a border to the 
mainBody div to help you see that the div is centered. 

Setting the margins to auto doesn't center the text. It centers the div 
(or other block-level element). Use text-align : center to center 
text inside the div. 



The code that demonstrates these ideas is shown here: 



<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>center .html</title> 
<style type = " text/ess "> 
#mainBody { 

border: 5px double black; 

width: 75%; 

margin-left: auto; 

margin-right: auto; 

} 

. indented { 
margin-left: 50%; 

} 

</style> 
</head> 



<body> 

<hl>Centering</hl> 
<div id = "mainBody" > 
<P> 

This paragraph is part of the centered main body. 
</p> 
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<p class = " indented" > 

This paragraph is indented to the right. 




Changing the Background Image 

You can use another CSS rule — background- image — to apply a back- 
ground image to a page or elements on a page. Figure 4-8 shows a page with 
this feature. 

Background images are easy to apply. The code for 
backgroundlmage . html shows how: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>backgroundImage .html</title> 
<style type = " text/ess "> 
body { 

background- image : url ( " ropeBG . j pg " ) ; 

} 



Figure 4-8: 

This page 
has a 

background 
image for 
the body 
and another 
for the 
heading. 
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url ( "ropeBGLight . jpg" ) ; 
white; 

<body> 

<hl>Using Background Images</hl> 
<P> 

The heading uses a lighter version of the background, 
and the paragraph uses a solid color background. 
The heading uses a lighter version of the background, 
and the paragraph uses a solid color background. 
The heading uses a lighter version of the background, 
and the paragraph uses a solid color background. 
</p> 
</body> 
</html> 

Attaching the background image to an element through CSS isn't difficult. 
Here are the general steps: 

1. Find or create an appropriate image and place it in the same directory 
as the page so it's easy to find. 

2. Attach the background- image style rule to the page you want to 
apply the image to. 

If you want to apply the image to the entire page, use the body element. 

3. Tell CSS where background- image is by adding a url identifier. 
Use the keyword url ( ) to indicate that the next thing is an address. 

4. Enter the address of the image. 

It's easiest if the image is in the same directory as the page. If that's the 
case, you can simply type the image name. Make sure you surround 
the URL with quotes. 

5. Test your background image by viewing the Web page in your 
browser. 

A lot can go wrong with background images. The image may not be in 
the right directory, you might have misspelled its name, or you may 
have forgotten the url ( ) bit (I do all those things sometimes). 

Getting a background check 

It's pretty easy to add backgrounds, but background images aren't perfect. 
Figure 4-9 demonstrates a page with a nice background. Unfortunately, the 
text is difficult to read. 



hi { 

background- image : 
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ckground-color : 



</style> 
</head> 
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Background images can add a lot of zing to your pages, but they can intro- 
duce some problems, such as: 

♦ Background images can add to the file size. Images are very large, so a 
big background image can make your page much larger and harder to 
download. 

♦ Some images can make your page harder to read. An image in the 
background can interfere with the text, so the page can be much harder 
to read. 

♦ Good images don't make good backgrounds. A good picture draws the 
eye and calls attention to it. The job of a background image is to fade 
into the background. If you want people to look at a picture, embed it. 
Background images shouldn't jump into the foreground. 

♦ Backgrounds need to be low contrast. If your background image is dark, 
you can make light text viewable. If the background image is light, dark text 
shows up. If your image has areas of light and dark (like nearly all good 
images), it'll be impossible to find a text color that looks good against it. 
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Solutions to the background conundrum 

_Wf b developers have come up with a number of solutions to background 
J | fj fj fj fjrifKeSl^ues over the years. I used several of these solutions in the 



"oundlmage . html page (the readable one shown in Figure 4-8). 



Using a tiled image 

If you try to create an image the size of an entire Web page, the image will be 
so large that dialup users will almost never see it. Even with compression 
techniques, a page-sized image is too large for quick or convenient loading. 



Fortunately, you can use a much smaller image and fool the user into think- Bool< 
ing it takes up the entire screen. Figure 4-10 shows the ropeBG . jpg that I Chapti 
used to cover the entire page. 




Image courtesy of Julian Burgess (Creative Commons License). 



I used a specially-created image for the background. Even though it's only 500 
pixels wide by 500 pixels tall, it's been carefully designed to repeat so you 
can't see the seams. If you look carefully, you can tell that the image repeats, 
but you can't tell exactly where one copy ends and the next one begins. 



This type of image is a tiled background or sometimes a seamless texture. 
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Getting a tiled image 

want an image that repeats seamlessly, you have two main options: 

nd an image online. A number of sites online have free seamless back- 
grounds for you to use on your site. Try a search and see what you come 
up with. 

♦ Make your own image. If you can't find a pre-made image that does 
what you want, you can always make your own. All the main image edit- 
ing tools have seamless background tools. In GIMP, choose 
FiltersOMapOMake Seamless. You can also do it by hand by offsetting 
the image (choose LayerOTransformOOffsetOOffset by x/2, y/2) and 
using the Blur or Clone tools to clean up the seams. 

By default, a background image repeats as many times as necessary in both 
the horizontal and vertical dimensions to fill up the entire page. This fills the 
entire page with your background, but you only have to download a small 
image. 

Setting background colors 

Background colors can be a great tool for improving readability. If you set 
the background color of a specific element, that background color will appear 
on top of the underlying element's background image. For the background 
image . html example, I set the background color of all p objects to white, so 
the text will appear on white regardless of the complex background. This is a 
useful technique for body text (like <p> tags) because text tends to be smaller 
and readability is especially important. If you want, you can set a background 
color that's similar to the background image. Just be sure the foreground color 
contrasts with the background color so the text is easy to read. 




When you use a dark background image with light text, be sure to also set the 
background-color to a dark color. This way the text is readable immediately. 
Images take longer to load than colors and may be broken. Make sure the 
user can read the text immediately. 



Reducing the contrast 

In backgroundlmage . html, the heading text is pretty dark, which won't 
show up well against the dark background image. I used a different trick for 
the hi heading. The heading uses a different version of the ropes image; this 
one is adjusted to be much brighter. The image is shown in Figure 4-11. 
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Figure 4-11: 

This is the 
ropes image 
with the 
brightness 
turned way 
up. 
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With this element, I kept the ropes image, but I made a much brighter back- 
ground so the dark text would show up well underneath. This technique 
allows you to use the background image even underneath text, but here are 
a few things to keep in mind if you use it: 



4- Make the image very dark or very light. Use the Adjust Colors command 
in IrfanView or your favorite image editor to make your image dark or 
light. Don't be shy. If you're creating a lighter version, make it very light. 
(See Book I, Chapter 6 for details on color manipulation in IrfanView.) 

♦ Set the foreground to a color that contrasts with the background. If 

you have a very light version of the background image, you can use dark 
text on it. A dark background will require light text. Adjust the text color 
with your CSS code. 

♦ Set a background color. Make the background color representative of 
the image. Background images can take some time to appear, but the 
background color appears immediately, because it is defined in CSS. This is 
especially important for light text because white text on the default white 
background is invisible. After the background image appears, it overrides 
the background color. Be sure the text color contrasts with the background 
whether that background is an image or a solid color. 

♦ Use this trick for large text. Headlines are usually larger than body text, 
and they can be easier to read, even if they have a background behind 
them. Try to avoid putting background images behind smaller body text. 
This can make the text much harder to read. 
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ou place your background image, you might not be completely 
d with the way it appears. Don't worry. You still have some control. 
You can specify how the image repeats and how it's positioned. 



Turning off the repeat 

Background images repeat both horizontally and vertically by default. You 
may not want a background image to repeat, though. Figure 4-12 is a page 
with the ropes image set to not repeat at all. 



The code uses the background-repeat attribute to turn off the automatic 
repetition. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 ,org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>noRepeat .html</title> 
<style type = " text/ess "> 
body { 

background- image : url ( " ropeBG . j pg " ) ; 
background-repeat: no-repeat; 

} 
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hi { 

background-color: white; 

DropBookr 

<body> 

<hl>Background with no-repeat</hl> 
</body> 
</html> 

The background-repeat attribute can be set to one of four different 
values: 

♦ repeat. The default value; the image is repeated indefinitely in both x- 
and y-axes. 

♦ no-repeat. Displays the image one time; no repeat in x- or y-axis. 

♦ repeat -x. Repeats the image horizontally but not vertically. 

♦ repeat -y. Repeats the image vertically but not horizontally. 

Making effective gradients 
With repeat-* and repeat-^ 

Gradients are images that smoothly flow from one color to another. They can 
have multiple colors, but simplicity is a virtue here. The repeat -x and 
repeat -y techniques discussed in the previous section can be combined 
with a special image to create a nice gradient background image that's very 
easy to download. Figure 4-13 shows an example of this technique. 

Even though the entire page is covered in a background image, I made the 
actual background quite small. The outlined area in Figure 4-13 is the actual 
image used in the background (displayed with an img tag and a border). You 
can see that the image used is very short (5 pixels tall). I used background- 
repeat : y to make this image repeat as many times as necessary to fill the 
height of the page. 

The code is pretty straightforward: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv=" content-type" content=" text/xml; charset=utf-8 " /> 
<title>gradient .html</title> 
<style type = "text/css"> 
body { 

background- image : url ( " blueGrad . j pg " ) ; 
background-repeat: repeat-y; 

> 
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Figure 4-13: 

The page 
appears to 
have a large 
background 
image. 
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sing a thin gradient background 



Here's the actual gradient height: 





img { 

border: lpx solid black; 

} 

</style> 
</head> 

<body> 

<hl>Using a thin gradient background</hl> 
<p> 

Here's the actual gradient height: <br /> 
<img src = "blueGrad.jpg" /> 

</p> 

</body> 
</html> 



Here's how you make a gradient background: 

♦ Obtain or create a gradient image. 

Most image editing tools can make gradient fills easily. In Gimp, you 
simply select the gradient tool, choose an appropriate foreground and 
background color, and apply the gradient to the image. 

♦ Set the image size. 

If you want your image to tile vertically (as I did), you'll want to make it 
very short (5 pixels) and very wide (I chose 1,600 pixels, so it would fill 
nearly any browser). 
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♦ Apply the image as the background image of the body or of any other 
element, using the background -image attribute. 

the background- repeat attribute to repeat -x to make the 
je repeat as many times as necessary vertically. 

Use a vertical gradient image if you prefer. If you want to have a color 
that appears to change down the page, create a tall, skinny gradient and 

set background-repeat to repeat-x. 

The great thing about this technique is how it uses a relatively small image 
to fill a large Web site. It looks good, but it'll still download reasonably fast. 



Using Images in Lists 



It's not quite a background, but you can also use images for list items. 
Sometimes you might want some type of special bullet for your lists, as 
shown in Figure 4-14. 
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My Favorite Peppers 

• Green 

8 Habenero 

• Arrivivi Gusano 



Figure 4-14: 

I can't get 
enough of 
those 
Arrivivi 
Gusanos. 
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On this page, I've listed some of my (many) favorite varieties of peppers. For 
this kind of list, a custom pepper bullet is just the thing. Of course, CSS is the 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>listlmages .html</title> 
<style type = " text/ess "> 

list-style-image: url { "pepper .gif" ) ; 

} 

</style> 
</head> 

<body> 

<hl>My Favorite Peppers</hl> 
<ul> 

<li>Green</li> 
< 1 i >Habenero< / 1 i> 
<li>Arrivivi Gusano</li> 
</ul> 
</body> 
</html> 



The list-style-image attribute allows you to attach an image to a list 
item. To create custom bullets: 

/. Begin with a custom image. 

Bullet images should be small, so you may have to make something 
little. I took a little pepper image and resized it to be 25 x 25 pixels. The 
image will be trimmed to an appropriate width, but it will have all the 
height of the original image, so make it small. 

2. Specify the list-style-image with a url attribute. 

You can set the image as the list-style-image, and all the bullets 
will be replaced with that image. 

3. Test the list in your browser. 

Be sure everything is working correctly. Check to see that the browser 
can find the image, that the size is right, and that everything looks like 
you expect. 
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W Building element-level styles 
V Creating external style sheets 
j-" Creating a multi-page style 

Managing cascading styles 

Using conditional comments 



CSS is a great tool for setting up the visual display of your pages. When 
you first write CSS code, you're encouraged to place all your CSS rules 
in a style element at the top of the page. CSS also allows you to define 
style rules inside the body of the HTML and in a separate document. In this 
chapter, you read about these alternative methods of applying style rules, 
when to use them, and how various style rules interact with each other. 



Managing Levels of Style 

Styles can be applied to your pages at three main levels: 

♦ Local styles: Defined by specifying a style within an XHTML element's 
attributes. 

♦ Page-level styles: Defined in the page's header area. This is the type of 
style used in Chapters 1 through 4 of this minibook. 

♦ External styles: Defined on a separate document and linked to the page. 

Using local styles 

A style can be defined directly in the HTML body. Figure 5-1 is an example of 
this type of code. A local style is also sometimes called an element-level 
style, because it modifies a particular instance of an element on the page. 
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Figure 5-1: 

This page 
has styles, 
but they're 
defined 
differently 
than you've 
done before 
in this book. 



^ocal Styles 



This paragraph has a locally-defined border 



This paragraph has a series of font and text rules applied. 
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You can't see the difference from Figure 5-1, but if you look over the code, you'] 
see it's not like style code you see in the other chapters in this minibook: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /Ed" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>localStyles .html</title> 
</head> 



<body> 

<hl>Local Styles</hl> 

<p style = "border: 2em #FF00FF groove"> 

This paragraph has a locally-defined border 
</p> 

<p style = "font-family: sans-serif; 
font-size: 1.2em; 
font-style: italic"> 
This paragraph has a series of font and text rules applied. 
</p> 
</body> 
</html> 



While you look over this code, a couple things should become evident: 




♦ No <style> element is in the header. Normally, you use a <style> 

section in the page header to define all your styles. This page doesn't 



Paragraphs have their own style attributes. I added a style attribute 
to each paragraph in the HTML body. All XHTML elements support the 
style attribute. 

♦ The entire style code goes in a single pair of quotes. For each styled 
element, the entire style goes into a pair of quotes because it's one 
HTML attribute. You can use indentation and white space (as I did) to 
make things easier to understand. 

When to use local styles 

Local styles should not be your first choice, but they can be useful in some 
circumstances. 

If you're writing a program to translate from a word processor or other tool, 
local styles are often the easiest way to make the translation work. If you use 
a word processor to create a page and you tell it to save as HTML, it will 
often use local styles because word processors often use this technique in 
their own proprietary format. Often when you see an HTML page with a lot 
of local styles, it's because an automatic translation tool made the page. 

Sometimes you'll see local styles used in code examples. For example, the 
following code could be used to demonstrate different border styles: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 



<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 
<title>localBorders . html</ title> 
</head> 

<body> 

<hl>Inline Borders</hl> 

<p style = "border: 5px solid black"> 

This paragraph has a solid black border 
</p> 

<p style = "border: 5px double black"> 

This paragraph has a double black border 
</p> 

</body> 
</html> 

For example purposes, it's helpful to see the style right next to the element. 
This code would be fine for demonstration or testing purposes (if you just 
want to get a quick look at some border styles), but it wouldn't be a good 
idea for production code. 




<head> 
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Local styles have very high priority, so anything you apply in a local style 
overrides the other style rules. This can be a useful workaround if things 

lapea^ working like you expect, but it's better to get a feel for why your styles 

|a\^Ty:ing as they are. 

The other place you'll occasionally see local styles is in Dynamic HTML (DHTML) 
applications like animation and motion. This technique often involves writing 
JavaScript code to change various style elements on the fly. The technique is 
more reliable when the style elements in question are defined locally. See Book 
IV, Chapter 7 for a complete discussion of this topic. 

The drawbacks of beat styles 

It's pretty easy to apply a local style, but for the most part, the technique 
isn't usually recommended because it has some problems, such as: 

♦ Inefficiency: If you define styles at the individual element level with the 
style attribute, you're defining only the particular instance. If you want 
to set paragraph colors for your whole page this way, you'll end up writing 
a lot of style rules. 

♦ Readability: If style information is interspersed throughout the page, it's 
much more difficult to find and modify than if it's centrally located in the 
header (or in an external document, as you'll see shortly). 

4- Lack of separation: Placing the styles at the element level defeats the 
goal of separating content from style. It becomes much more difficult to 
make changes, and the mixing of style and content makes your code 
harder to read and modify. 

♦ Awkwardness: An entire batch of CSS rules has to be stuffed into a 
single HTML attribute with a pair of quotes. This can be tricky to read 
because you have CSS integrated directly into the flow of HTML. 

♦ Quote problems: The XHTML attribute requires quotes, and some CSS 
elements also require quotes (font families with spaces in them, for 
example). Having multiple levels of quotes in a single element is a recipe 
for trouble. 

Using an external style sheet 

CSS supports another way to use styles, called external style sheets. This 
technique allows you to define a style sheet as a separate document and 
import it into your Web pages. To see why this might be attractive, take a 
look at the following figure. 

Figure 5-2 shows a page with a distinctive style. 
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When you look at the code for externalStyle . html, you might be sur- 
prised to see no obvious style information at all! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv=" content-type" content="text/xml; charset=utf -8 " /> 
<title>externalstyle .html</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "myStyle . ess" /> 

</head> 

<body> 

<hl>External Style</hl> 
<P> 

This page has styles set for paragraphs, body, and header 1. 
</p> 

<P> 

The styles are defined in an external style sheet. 
</p> 
</body> 
</html> 

Where you'd normally see style tags (in the header), there is no style. 
Instead, you see a <link> tag. This special tag is used to connect the cur- 
rent document with another document. 
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Defining the external style 

When you use a page-level style, the style elements aren't embedded in the 
^^ieader but in an entirely separate document. 

In this case, the page is connected to a special file called myStyle . ess. This 
file contains all the CSS rules: 

/* myStyle.css */ 
body { 

background-color: #333300; 
color: #FFFFFF; 

} 

hi { 

color: #FFFF33; 

text-align: center; 

font: italic 200% fantasy; 

} 

P ( 

background-color: #FFFF33 ; 
color: #333300; 
text-align: right; 
border: 3px groove #FFFF33; 

} 

The style sheet looks just like a page-level style, except for a few key differences: 

♦ The style sheet rules are contained in a separate file. The style is no 
longer part of the HTML page but is an entirely separate file stored on 
the server. CSS files usually end with the . ess extension. 

4- There are no <stylex/style> tags. These aren't needed because the 
style is no longer embedded in HTML. 

♦ The code begins with a comment. The / * * / pair indicates a comment 
in CSS. Truthfully, you can put comments in CSS in the page level just like 
I did in this external file. External CSS files frequently have comments in 
them. 

♦ The style document has no HTML. CSS documents contain nothing but 
CSS. This comes closer to the goal of separating style (in the CSS document) 
and content (in the HTML document). 

♦ The document isn't tied to any particular page. The great advantage of 
external CSS is reuse. The CSS document isn't part of any particular 
page, but any page can use it. 
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Reusing an external CSS stifle 

Eternal style sheets are really fun when you have more than one page that 
e same style. Most Web sites today use multiple pages, and they 
are a common style sheet to keep consistency. Figure 5-3 shows a 
second page using the same myStyle .ess style sheet. 



The code shows how easily this is done: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http : / /www. w3 . org/TR/xhtmll/DTD/xhtmll-strict . dtd" > 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>SecondPage .html</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "myStyle . ess" /> 

</head> 

<body> 

<hl>Second Page</hl> 
<p> 

This page uses the same style as 

<a href = "externalStyle .html ">externalStyle .html</a> . 
</p> 
</body> 
</html> 
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Figure 5-3: 

This page 
uses the 
same style 
as the first 
one, but I 
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ne style sheet can control many pages: You'll generally have a large 
mber of different pages in a Web site that all share the same general 
style. You can define the style sheet in one document and have all the 
HTML files refer to the CSS file. 



♦ Global changes are easier: Let's say you have a site with a dozen pages, 
and you decide you want some kind of chartreuse background (I don't 
know why — go with me here). If each page has its own page-level style 
definition, you have to make the change 12 times. If you're using external 
styles, you make the change in one place and it's automatically propa- 
gated to all the pages in the system. 

♦ Separation of content and design: With external CSS, all the design is 
housed in the CSS, and the data is in XHTML. 

♦ Easy upgrades: Because the design parameters of the entire site are 
defined in one file, you can easily change the site without having to mess 
around with individual HTML files. 



Understanding the link tag 

The link tag is the key to adding a CSS reference to an HTML document. The 
link tag has the following characteristics: 

♦ The <link> tag is part of the HTML page. Use a link tag in your HTML 
document to specify which CSS document will be used by the HTML page. 

♦ The link tag only occurs in the header. Unlike the a tag, the <link> 
tag can occur only in the header. 

♦ The tag has no visual presence. The user can't see the link tag, only 
its effects. 

♦ The link tag is used to relate the document with another document. 

You use the link tag to describe the relationship between documents. 

♦ The link tag has a rel attribute, which defines the type of relationship. 

For now, the only relationship you'll use is the stylesheet attribute. 

♦ The <link> tag also has an href attribute, which describes the loca- 
tion of the other document. 




Link tags are often used to connect a page to an externally-defined style 
document (more on them in the next section). 
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Most people refer to the hyperlinks created by the anchor (a) tag as hyper- 
links or links. This can lead to some confusion, because, in this sense, the link 
Vt create that type of links. If it were up to me, the a tag would have 
ad the link tag, and the tag now called link would have been called 
rel or something. Maybe Tim Berners-Lee meant to call me the day he named 
these elements, and he just forgot. That's what I'm thinking. 



Specifying an externa t link 

To use the <link> tag to specify an external style sheet, follow these steps: 

/. Define the style sheet. „ . „ 

J Book II 

External style sheets are very similar to the ones you already know. Just Chapter 5 

put all the styles in a separate text document without the <style> and 

</style> tags. In my example, I created a new text file called myStyle . 

CSS . g 

2. Create a link element in the HTML page's head area to define the £ 
linkage between the HTML and CSS pages. £ 

V) 

My link element looks like this: M 

<link rel = "stylesheet" 
type = "text/ess" 
href = "myStyle . ess " /> 

3. Set the link's relationship by setting the rel = "stylesheet" 
attribute. 

Honestly, stylesheet is almost the only relationship you'll ever use, so 
this should become automatic. 

4. Specify the type of style by setting type = "text /ess" (just like you 
do with page-level styles). 

5. Determine the location of the style sheet with the href attribute. 



Understanding the Cascadinq Part 
of Cascadinq Style Sheets 

The C in CSS stands for cascading, which is an elegant term for an equally 
elegant and important idea. Styles cascade or flow among levels. An ele- 
ment's visual display may be affected by rules in another element or even 
another document. 
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Inheriting styles 

["^ IWhen you apply a style to an element, you change the appearance of that 

J |*^ l^nSnt. If the element contains other elements, the style is often passed on 

tcxfTIose containers. Take a look at Figure 5-4 for an illustration. 

Figure 5-4 shows several paragraphs, all with different font styles. Each para- 
graph is white with a black background. All the paragraphs use a Fantasy 
font. Two of the paragraphs are italicized, and one is also bold. Look at the 
code, and you'll see how the CSS is defined. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>CascadingStyles</title> 
<style type = " text/ess "> 
body { 

color: white; 

background-color: black; 

} 

P { 

font-family: fantasy; 

} 
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Cascading Styles 

This is an ordinary paragraph 
This paragraph is part of a special class 
This paragraph has a class and an ID 
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Figure 5-4: 

The last 
paragraph 
inherits 
several style 
rules. 
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.italicized { 

font-style: italic; 

} 



_(Ld { 

font-weight: bold; 
} 

</style> 
</head> 



<body> 

<hl>Cascading Styles</hl> 

<p>This is an ordinary paragraph</p> 

<p class = "italicized"> Book II 

This paragraph is part of a special class Chapter 5 

</p> 



<p class = "italicized" 

id = "bold"> Ed" 
This paragraph has a class and an ID</p> <§ 
</body> en" 

o 

</html> f"> 

VI 

V) 

Take a look at the page, and you'll notice some interesting things: 



♦ Everything is white on a black background. These styles were defined 
in the body. Paragraphs without specific colors will inherit the colors of 
the parent element (in this case, the body). There's no need to specify 
the paragraph colors because the body takes care of them. 

♦ Paragraphs all use the fantasy font. I set the paragraph's font-family 
attribute to fantasy. All paragraphs without an explicit font- family 
attribute will use this rule. 

♦ A class is used to define italics. The second paragraph is a member of 
the italicized class, which gives it italics. Because it's also a paragraph, 
it gets the paragraph font, and it inherits the color rules from the body. 

♦ The bold ID only identifies font weight. The third paragraph has all 
kinds of styles associated with it. This paragraph displays all the styles 
of the second, plus the added attributes of its own ID. 



In the cascadingStyles . html example, the final paragraph inherits the font 
from the generic p definition, italics from its class, and boldfacing from its ID. 
Any element can attain style characteristics from any of these definitions. 



Hierarchy of styles 

An element will display any style rules you define for it, but certain rules are 
also passed on from other places. In general, this is how style rules cascade 
through the page: 
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♦ The body defines overall styles for the page. Any style rules that you 
want the entire page to share should be defined in the body. Any ele- 
ent in the body begins with the style of the page. This makes it easy to 
fine an overall page style. 



♦ A block-level element passes its style to its children. If you define a 
div with a particular style, any elements inside that div will inherit the 
div's style attributes. Likewise, defining a list will also define the list 
items. 

♦ You can always override inherited styles. Of course, if you don't want 
paragraphs to have a particular style inherited from the body, you can 
just change them. 




Not all style rules are passed on to child elements. The text formatting and 
color styles are inherited, but border and positioning rules are not. This actu- 
ally makes sense. Just because you've defined a border around a div doesn't 
mean you'll want the same border around the paragraphs inside that div. 



Overriding styles 

The other side of inherited style is the ability to override an inherited style 
rule. For example, take a look at this code: 



<!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Strict/ /KN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>overRide . html< / title> 
<style type = " text/ess "> 

body { color: red; } 

p {color: green; } 

.myClass { color: blue; } 

#whatColor { color: purple; } 
</style> 
</head> 



<body> 

<p class = "myClass" 
id = "whatColor"> 
This paragraph is a member of a class and has an ID, 
both with style rules. It has four conflicting 
color rules ! 
</p> 
</body> 
</html> 



The code listing has a different indentation scheme than I've used in the rest 
of the chapter. Because all the styles had one rule, I chose not to indent to 
save space. 



Understanding the Cascading Part of Cascading Style Sheets 239 



member c 

ate 



The question is this: What color will the "whatColor " element display? It's a 
member of the body, so it should be red. It's also a paragraph, and paragraphs 
It's also a member of the myClass class, so it should be blue, 
s named whatColor, and elements with this ID should be purple. 



Four seemingly conflicting color rules are all dropped on this poor element. 
What color will it be? 



CSS has a clear ranking system for handling this type of situation. In general, 
more specific rules trump more general rules. Here's the precedence (from 
highest to lowest precedence): 

/. User preference: The user always has the final choice about what styles 
are used. User's aren't required to use any styles at all, and can always 
change the style sheet for their own local copy of the page. If a user 
needs to apply a special style (for example, high contrast for people 
with visual disabilities), he should always have that option. 

2. local style: A local style (defined with the style attribute in the HTML) 
has the highest precedence of developer-defined styles. It overrules any 
other styles. 

3. id: A style attached to an element id has a great deal of weight because 
it overrides any other styles defined in the style sheet. 

4. class: Styles attached to a class override the style of the object's ele- 
ment. So, if you have a paragraph with a color green that belongs to a 
class colored blue, the element will be blue because class styles outrank 
element styles. 

5. element: The element style takes precedence over any of its containers. 
For example, if a paragraph is inside a div, the paragraph style has the 
potential to override both the div and the body. 

6. container element: Divs, tables, lists, and other elements used as con- 
tainers pass their styles on. If an element is inside one or more of these 
containers, it can inherit style attributes from them. 

7. body: Anything defined in the body style is an overall page default, but it 
will be overridden by any other styles. 

In the overRide . html example, the id rule will take precedence, so the 
paragraph will display in green. 

If you want to see a more complete example, look at cascadingStyles . 
html on the CD-ROM. It extends the whatColor example with other paragraphs 
that demonstrate the various levels of the hierarchy. 
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Precedence of style definitions 

iWhen you have styles defined in various places (locally, page level, or exter- 
J | Cj LJ |j Cj CJ r\'^ tne placement of the style rule also has a ranking. In general, an exter- 
l"^ nal style has the weakest rank. You can write a page-level style rule to 

override an external style. 



You might do this if you've decided all your paragraphs will be blue, but you 
have one page where you want the paragraphs green. Define paragraphs as 
green in the page-level style sheet, and your page will have the green para- 
graphs without interfering with the other page's styles. 

Page-level styles (defined in the header) have medium weight. They can 
override external styles but are overridden by local styles. 

Locally defined styles (using the HTML style attribute) have the highest 
precedence, but they should be avoided as much as possible. Use classes or 
IDs if you need to override the page-level default styles. 



Using Conditional Comments 

While we're messing around with style sheets, there's one more thing you 
should know. Every once in a while, you'll encounter a page that needs one set 
of style rules for most browsers and has some exceptions for Internet Explorer. 

Most of what you know works equally well in any browser. I've focused on 
the established standards, which work very well on most browsers. 
Unfortunately Internet Explorer (especially before version 7) is notorious for 
not following the standards exactly. Internet Explorer (IE) doesn't do every- 
thing exactly right. When IE had unquestioned dominance, everybody just 
made things work for IE. Now you have a bigger problem. You need to make 
your code work for standards-compliant browsers, and sometimes you need 
to make a few changes to make sure that IE displays things correctly. 

Coping With incompatibility 

This has been a problem since the beginning of Web development, and there 
have been a number of solutions proposed over the years, such as: 

♦ "Best viewed with" disclaimers: One common technique is to code for 
one browser or another and then just ask users to agree with your 
choice by putting up this disclaimer. This isn't a good technique 
because the user shouldn't have to adapt to you. Besides, sometimes 
the choice is out of the user's hands. More and more small devices (such 
as PDAs and cell phones) have browsers built in, which are difficult to 
change. IE isn't available on Linux machines, and not everyone can 
install a new browser. 
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♦ Parallel pages: You might be tempted to create two different versions of 
your page, one for IE and one for the standards-compliant browsers 

fox, Netscape Navigator, Opera, Safari, and so on). This is also a bad 
ion because it's twice (or more) as much work. You'll have a lot of 
trouble keeping track of changes in two different pages. They'll 
inevitably fall out of synch. 

JavaScript-based browser detection: In Book IV, you see that JaveScript 
has features for checking on the browser. This is good, but it still doesn't 
quite handle the differences in style sheet implementation between the 
browsers. 

CSS hacks: The CSS community has frequently relied on a series of 
hacks (unofficial workarounds) to handle CSS compatibility problems. 
This approach works by exploiting certain flaws in IEs design to over- 
come others. The biggest problem with this is that when Microsoft fixes 
some flaws (as they've done with IE 7), many of the flaws you relied on 
to fix a problem may be gone, but the original problem is still there. 

Conditional comments: Although IE has bugs, it also has some innovative 
features. One of these features, conditional comments, lets you write code 
that will be displayed only in IE. Because the other browsers don't support 
this feature, the IE-specific code will be ignored in any browser not based 
on IE. This is the technique currently preferred by coders who adhere to 
Web standards. 
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Making Internet Explorer-specific code 

It's a little easier for you to see how conditional comments work if I show you 
a simple example — and then show you how to use the conditional comment 
trick to fix CSS incompatibility problems. 

Figure 5-5 shows a simple page with Firefox. Figure 5-6 shows the exact same 
page as it's displayed in IE 7. 

Take a look at the code for whatBrowser . html and see how it works. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>IEorNot.html</title> 

</head> 

<body> 
<P> 

I will now use a conditional comment to determine your 
browser. I'll let you know if you're using IE. 
</p> 
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Figure 5-5: 

This isn't IE. 



now use a conditional comment to determine your browser. I'll let you 
know if you're using IE. 
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Figure 5-6: 

...And this 
is IE. 

Somehow 
the code 
knows the 
difference. 



& IEorNot.html - Windows Internet Explorer 
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I will now use a conditional comment to determine your browser. I'll let you know if you're using IE. 

You're using IE 



<j_ 



> 



J My Computer 
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The only part that's new is the strange comments: 

<! — [if IE]> 

<hl>You're using IE</hl> 
< ! [endif] --> 

Conditional comments are a special feature available only in Internet Book II 

Explorer. They allow you to apply a test to your browser. You can place any Chapter 5 

XHTML code you wish between <!- - [if IE] > and <! [endif ]-->, but 

that code will only be rendered by versions of Internet Explorer. Any other 

browser will read the entire block as a comment and ignore it completely. ST 

So, when you look at whatBrowser in IE, it sees the conditional comment, S 
says to itself "Why yes, I'm Internet Explorer" and displays the "Using IE" cs 
headline. If you look at the same page with Firefox, the browser doesn't oo 
understand the conditional comment but sees an HTML comment (which 
begins with < ! -- and ends with -->). HTML comments are ignored, so the 
browser does nothing. 

Using a conditional comment With CSS 

Conditional comments on their own aren't that interesting, but they can be a 
very useful tool for creating compatible CSS. You can use conditional com- 
ments to create two different style sheets, one that works for IE and one that 
works with everything else. Figures 5-7 and 5-8 illustrate a simple example of 
this technique: 

Most browsers will read a standard style sheet that creates a yellow 
background. 

If the page is rendered in IE, it uses a second style sheet. 

Look at the code and you'll see it's very similar to the iEorNot . html page. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv= " content-type" content="text/xml; charset=utf-8 " /> 
<title>WhatBrowser .html</title> 
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Figure 5-7: 

This page 
has a yellow 
background 
in most 
browsers. 



Dage has a red background in IE, and a yellow background in other 
browsers. 
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■ WhatBrowser.html - Windows Internet Explorer 
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This page has a red background in IE, and a yellow background in other browsers. 



Figure 5-8: 

The same 
page uses a 
different 
style sheet 
in IE. 




J My Computer 
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default style — > 
<style type = " text/ess "> 
body { 

ckground-color : yellow; 
lor : blue ; 



</style> 

<!-- IE only style overrides default --> 
<! — [if IE]> 

<style type = "text/css"> 
body { 

background-color: red; 
color: yellow; 

} 

</style> Book II 

<![endif]--> Chapter 5 

</head> 

<body> cd" 

< 

<p> en 

This page has a red background in IE, and a yellow 3. 

background in other browsers . 52 

C/3 

</P> V) 
</body> 
</html> 



If you want a page to use different styles in IE and other browsers, do the 
following: 

/. Define the default style first. 

Begin by creating the style that will work in most browsers. Most of the 
time, this style will also work in IE. You can create the style at the page level 
(with the <style></style> pair) or externally (with the <link> tag). 

2. Create a conditional comment in the header. 

Create a conditional comment after the primary style, as shown in this 
code snippet. 

<!-- default style --> 
<style type = "text/css"> 
body { 

background-color: yellow; 
color: blue; 

} 

</style> 

<!-- IE only style overrides default --> 
<!--[if IE]> 

< ! [endif ] --> 
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3. Build a new IE-specific style inside the comment. 
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The style inside the comment will be applied only to IE browsers, such 
I did in the following lines: 



-[if IE]> 

<style type = "text/css"> 
body { 

background-color: red; 
color: yellow; 

} 

</style> 
< ! [endif ] — > 

4. The commented style can be page level or external. 

Like the default style, you can use the <style></style> pair to make a 
page-level style, or you can use the <link> tag to pull in an externally- 
defined style sheet. 

5. Only place code that solves IE issues in the conditional style. 

IE will read the code in both styles, so there's no need to repeat every- 
thing. Use the conditional style for only those areas where IE doesn't do 
what you expect. 

6. Don't forget to end the conditional comment. 

If you leave off the end of your conditional comment (or any comment, 
for that matter), most of your page won't appear. That could be bad. 



Checking the Internet Explorer Version 

So far, you haven't encountered many situations that require conditional 
comments, but they're handy when you need them. One more trick can be 
useful. You can specify which version of IE you're using. This will be impor- 
tant when you read about positionable CSS in Book III, as IE 7 works pretty 
well with standards-compliant code, but the earlier versions do not. You can 
use this variation to specify code only for IE 6 and earlier. 



<!--[if lte IE 6]> 
< [endif] --> 



The lte signifies less than or equal to, so code inside this condition will run 
only on early versions of IE. Look ahead to Book III to see more examples of 
conditional commenting. 
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In This Chapter 

Understanding the pitfalls of traditional layout tools 
e* Using float with images and block-level tags 
Setting the width and margins of floated elements 
Creating attractive forms with float 
Using the clear attribute with float 



■ Mneol the big criticisms of HTML is its lack of real layout tools. You can 

do a lot with your page, but it's still basically a list of elements arranged 
vertically on the screen. As the Web matures and screen resolutions improve, 
people want Web pages to look more like print matter, with columns, good- 
looking forms, and more layout options. CSS provides several great tools for 
building nice layouts. After you get used to them, you can build just about any 
layout you can imagine. This chapter describes the amazing float attribute 
and how it can be used as the foundation of great page layouts. 



Avoiding Otd-Scfwol Layout Pitfalls 

Back in the prehistoric (well, pre-CSS) days, no good option was built into 
HTML for creating a layout that worked well. Clever Web developers and 
designers found some ways to make things work, but these proposed solu- 
tions all had problems. 

Problems vOith frames 

Frames were a feature of the early versions of HTML. They allowed you to 
break a page into several segments. Each segment was filled with a different 
page from the server. You could change pages independently of each other, 
to make a very flexible system. You could also specify the width and height 
of each frame. 

At first glance, frames sound like an ideal solution to layout problems. In 
practice, they had a lot of disadvantages, such as 
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♦ Complexity: If you had a master page with four segments, you had to 
keep track of five Web pages. A master page kept track of the relative 
^psitions of each section but had no content. Each of the other pages 
tjid content but no built-in awareness of the other pages. 

♦ Linking issues: The default link action caused content to pop up in the 
same frame as the original link, which isn't usually what you want. Often, 
you'd put a menu in one frame and have the results of that menu pop up 
in another frame. This meant most anchors had to be modified to make 
them act properly. 

♦ Backup nightmares: If the user navigated to a page with frames and 
then caused one of the frames to change, what should the backup 
button do? Should it return to the previous state (with only the one seg- 
ment returned to its previous state) or was the user's intent to move 
entirely off the master page to what came before? There are good argu- 
ments for either and no good way to determine the user's intention. 
Nobody ever came up with a reasonable compromise for this problem. 

♦ Ugliness: Although it's possible to make frames harder to see, they did 
become obvious when the user changed the screen size and scroll bars 
would automatically pop up. 

For all these reasons, frames aren't allowed in XHTML Strict documents. The 
layout techniques you read about in this chapter more than compensate for 
the loss of frames as layout tools. Read in Chapter 4 of Book VIII how to inte- 
grate content from other pages on the server with AJAX. 

Problems With tables 

When it became clear that frames weren't the answer, Web designers turned 
to tables. HTML has a flexible and powerful table tool, and it's possible to do 
all kinds of creative things with that tool to create layouts. Many HTML devel- 
opers still do this, but you'll see that flow-based layout is cleaner and easier. 
Tables are meant for tabular data, not as a layout tool. When you use tables 
to set up the visual layout of your site, you'll encounter these problems: 

♦ Complexity: Although table syntax isn't that difficult, a lot of nested tags 
are in a typical table definition. In order to get exactly the look you want, 
you probably won't use an ordinary table but tricks, like rowspan and 
colspan, special spacer images, and tables inside tables. It doesn't take 
long for the code to become bulky and confusing. 

♦ Content and display merging: Using a table for layout violates the prin- 
ciple of separating content from display. If your content is buried inside 
a complicated mess of table tags, it'll be difficult to move and update. 
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♦ Inflexibility: If you create a table-based layout and then decide you 
don't like it, you basically have to redesign the entire page from scratch, 
o simple matter to move a menu from the left to the top in a table- 
d design, for example. 



Tables are great for displaying tabular data. Avoid using them for layout 
because you have better tools available. 

Problems With huge images 

Some designers skip HTML altogether and create Web pages as huge images. 
Tools, like Photoshop, include features for creating links in a large image. 
Again, this seems ideal because a skilled artist can have control over exactly 
what is displayed. Like the other techniques, this has some major draw- 
backs, such as 

♦ Size and shape limitations: When your page is based on a large image, 
you're committed to the size and shape of that image for your page. If a 
person wants to view your page on a cell phone or PDA, it's unlikely to 
work well, if at all. 

♦ Content issues: If you create all the text in your graphic editor, it isn't 
really stored to the Web page as text. In fact, the Web page will have no 

text at all. This means that search engines can't index your page, and Book III 

screen readers for people with disabilities won't work. Chapter 1 

♦ Difficult updating: If you find an error on your page, you have to modify 

the image, not just a piece of text. This makes updating your page more „ 

challenging than it would be with a plain XHTML document. 3 1 -n 

a- = 

♦ File size issues: An image large enough to fill a modern browser window 5- g 

will be extremely large and slow to download. Using this technique will 5 gi 

all but eliminate users with dialup access from using your site. 5* 

a 

Problems With Flash 

Another tool that's gained great popularity is the Flash animation tool from 
Adobe (formerly Macromedia). This tool allows great flexibility in how you 
position things on a page and supports techniques that are difficult or 
impossible in ordinary HTML, like integrating sound and video, automatic 
motion tweening, and path-based animation. Flash certainly has a place in Web 
development (especially for embedded games — check out my earlier book 
Beginning Flash Game Programming For Dummies [Wiley Publishing, Inc.]). Even 
though Flash has great possibilities, you should avoid its use for ordinary Web 
development because of 

♦ Cost: The Flash editor isn't cheap, and it doesn't look like it'll get 
cheaper. The tool is great, but if there are free or low-cost alternatives 
that work just as well, it's hard to justify the cost. 
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♦ Binary encoding: All text in a Flash Web page is stored in the Flash file 
itself. It's not visible to the browser. Flash pages (like image-based 
^ages) don't work in Web searches and aren't useful for people with 
^reen readers. 

♦ Updating issues: If you need to change your Flash-based page, you have 
to have the Flash editor installed. This can make it more difficult to keep 
your page up to date. 

♦ No separation of content: As far as the browser is concerned, there's no 
content but the Flash element, so there's absolutely no separation of 
content and layout. If you want to make a change, you have to change 
the Flash application. 

Adobe has recently released a very interesting tool called Flex. It's based on 
the Flash engine, and it's specifically designed to overcome some of the 
shortcomings I've listed in the proceeding section. It'll be interesting to see if 
this becomes an important technology. 

Introducing the Floating Layout Mechanism 

CSS supplies a couple techniques for layout. The preferred technique for most 
applications is a floating layout. The basic idea of this technique is to leave the 
XHTML layout as simple as possible but to provide style hints that tell the 
various elements how to interact with each other on the screen. 

In a floating layout, you don't legislate exactly where everything will go. 
Instead, you provide hints and let the browser manage things for you. This 
insures flexibility because the browser will try to follow your intentions, no 
matter what size or shape the browser window becomes. If the user resizes 
the browser, the page will flex to fit to the new size and shape, if possible. 

Floating layouts typically involve less code than other kinds of layouts 
because only a few elements need specialized CSS. In most of the other 
layout techniques, you'll need to provide CSS for every single element in 
order to make things work as you expected. 

Using float With images 

The most common place to use the float attribute is with images. Figure 1-1 
has a paragraph with an image embedded inside. 

It's more likely that you want the image to take up the entire left part of the 
paragraph. The text should flow around the paragraph, like Figure 1-2. 



DropBook 




introducing the Floating Layout Mechanism 253 



lNoFloat.html - Mozilla Firefox 



DropBo 




Figure 1-1: 

The image 
acts like a 
single 
character 
without a 
flow setting. 
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This is a paragraph with an image embedded in it. The default behavior 
is to treat the image as one character. This can cause some strange effects. 
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Figure 1-2: 

Now the 
text wraps 
around the 
image. 
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^^^The image now has its float attribute set to left. That means that the text 
Aj^Hwill flow around the image as it normally does in a magazine. The 
^^^^ image now has its float attribute set to left. That means that the text will 
flow around the image as it normally does in a magazine. The image now has its 
float attribute set to left. That means that the text will flow around the image as 
it normally does in a magazine. The image now has its float attribute set to left. 
That means that the text will flow around the image as it normally does in a 
magazine. The image now has its float attribute set to left. That means that the 
text will flow around the image as it normally does in a magazine. 
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When you add a float : lef t attribute to the img element, the image tends 
to move to the left, pushing other content to the right. Now, the text flows 
[a*o«nd the image. The image is actually removed from the normal flow of the 
|p\g^ayout, so the paragraph takes up all the space. Inside the paragraph, 
the text avoids overwriting the image. 

Adding the float property 

The code for adding the float property is pretty simple: 

<!DOCTYPE html PUBLIC " -/ /W3C/ /DTD XHTML 1.0 Strict//EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>imgFloat .html</title> 
<style type = " text/ess "> 
img { 

float: left; 

} 

</style> 
</head> 

<body> 
<p> 

<img sre = "ball.gif" 
alt = "ball" /> 

The image now has its float attribute set to left. That means 
that the text will flow around the image as it normally does 
in a magazine. 

The image now has its float attribute set to left. That means 
that the text will flow around the image as it normally does 
in a magazine. 

The image now has its float attribute set to left. That means 
that the text will flow around the image as it normally does 
in a magazine. 

The image now has its float attribute set to left. That means 
that the text will flow around the image as it normally does 
in a magazine. 

The image now has its float attribute set to left. That means 
that the text will flow around the image as it normally does 
in a magazine. 

</p> 
</body> 
</html> 

The only new element in the code is the CSS float attribute. The img object 
has a float : left attribute. It isn't necessary to change any other attributes 
of the paragraph because the paragraph text knows to float around the image. 



Of course, you don't have to simply float to the left. Figure 1-3 shows the 
same page with the image's float attribute set to the right. 
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Figure 1-3: 

Now the 
image is 
floated to 
the right. 



e linage now has its float attribute set to right. That means that the 
text will flow around the image as it normally does in a magazine. The 
image now has its float attribute set to right. That means that the text 
will flow around the image as it normally does in a magazine. The image now 
has its float attribute set to right. That means that the text will flow around the 
image as it normally does in a magazine. The image now has its float attribute 
set to right. That means that the text will flow around the image as it normally 
does in a magazine. 



0 errovs /0 warnings Q f Now: Clear, 53 : F 



Using Float With Block-LeUel Elements 



The float attribute isn't only for images. You can also use it with any block- 
level element (typically p or div) to create new layouts. Using the float attrib- 
ute to set the page layout is easy after you understand how things really work. 



Floating a paragraph 



Paragraphs and other block-level elements have a well-defined default 
behavior. They take up the entire width of the page, and the next element 
appears below. When you apply the float element to a paragraph, the 
behavior of that paragraph doesn't change much, but the behavior of suc- 
ceeding paragraphs is altered. 

To illustrate, I take you all the way through the process of building two side- 
by-side paragraphs. 
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Begin by looking at a page with three paragraphs. Paragraph 2 has its float 
property set to left. Figure 1-4 illustrates such a page. 
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Figure 1-4: 

Paragraphs 
2 and 3 are 
acting 
strangely. 
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t Demo 



Paragraph 1, This paragraph has the normal behavior of a block-level element. It takes up the entil e width of the page, and the next 
element is placed underneath. 



Paragraph 3 . 



? aj agi :.pl: 2 . . his paragraph is floated left. It is placed to the left, and the next element will be placed to the light of it"| This parasr; 



width or margin. It takes whatever space it can to the light of the floated element, and then flows to the next line. 
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As you can see, some strange formatting is going on here. I improve on 
things later to make the beginnings of a two-column layout, but for now, just 
take a look at what's going on: 

♦ The first paragraph acts normally. The first paragraph has the same 
behavior you've seen in all block-style elements. It takes up the entire 
width of the page, and the next element will be placed below it. 

♦ The second paragraph is pretty normal. The second paragraph has its 
float attribute set to left. This means that the paragraph will be 
placed in its normal position, but that other text will be placed to the left 
of this element. 

♦ The third paragraph seems skinny. The third paragraph seems to sur- 
round the second, but the text is pushed to the right. The float parame- 
ter in the previous paragraph causes this one to be placed in any 
remaining space (which currently isn't much). The remaining space is on 
the right and eventually underneath the second paragraph. 

The code to produce this is simple HTML with equally simple CSS markup: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
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<title>f loatDemo</title> 
<style type = " text/ess "> 
P ( 

f ^korder: 2px black solid; 



oated { 



float: left; 

} 

</style> 

</head> 

<body> 

<hl>Float Demo</hl> 
<p> 

Paragraph 1 . 

This paragraph has the normal behavior of a block-level element. 
It takes up the entire width of the page, and the next element 
is placed underneath. 
</p> 

<p class = "floated"> 
Paragraph 2 . 

This paragraph is floated left. It is placed to the left, and the 
next element will be placed to the right of it. 



<P> 

Paragraph 3 . 

This paragraph has no floating, width or margin. It takes whatever 
space it can to the right of the floated element, and then flows 
to the next line. 



As you can see from the code, I have a simple class called floated with the 
float property set to left. Notice also that the paragraphs are defined in the 
ordinary way; even though paragraph 2 seems to be embedded inside para- 
graph 3 in the screen shot, the code clearly shows that this isn't the case. 
The two paragraphs are completely separate. 

I added a black border to each paragraph so you can see that the size of the 
element isn't always what you'd expect. 



When you float an element, the behavior of succeeding elements is highly 
dependant on the width of the first element. This leads to a primary principle 
of float-based layout: 



</p> 



< 



</p> 

</body> 
/html> 



Adjusting the Width 



If you float an element, you must also define its width. 
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x? ^ The exception to this rule is elements with a predefined width, like images and 
""""""" many form elements. These elements already have an implicit width, so you 

njt^ieed to define width in the CSS. If in doubt, try setting the width at various 
until you get the layout you're looking for. 



Figure 1-5 shows the page after I adjusted the width of the floated paragraph 
to 50 percent of the page width. 

Things look better in Figure 1-5, but paragraph 2 still seems to be embedded 
inside paragraph 3. The only significant change is in the CSS style: 



<style type = " text/ess "> 
P { 

border: 2px black solid; 

} 

. floated { 
float: left; 
width: 50%; 

} 

</style> 



I've added a width property to the floated element. 



Elements that have the float attribute enabled will generally also have a 
width defined, except for images or other elements with an inherent width. 
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Specifying the width 



Paragraph 1 . This paragraph has the normal beha\"ior of a block- level element. It takes up the entire width of the page, and the next 
element is placed underneath. 





Paraaraph 3. This paragraph has no floating, width or marain. It 


Paragraph 2. I've adjusted this paragraph to have a width of 50%. 
Tliis paragraph is floated left. It is placed to the left, and the next 


takes whatever space it can to the right of the floated element, and 
then flows to the next line. 


element wui oe placed to the right ot it. 





Figure 1-5: 

The floated 
paragraph 
has a width 
of 50 

percent of 
the page. 



^ 0 errors /0 earnings © f Now: Clear, 53 1 F 
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When you use a percentage value in the context of width, you're expressing 
ercentage of the parent element (in this case, the body because the para- 
,embedded in the document body). Setting the width to 5 0% means 
lis paragraph to span half the width of the document body 



Setting the next margin 



Things still don't look quite right. I added the borders around each para- 
graph so you can see an important characteristic of floating elements. Even 
though the text of paragraph 3 wraps to the right of paragraph 2, the actual 
paragraph element still extends all the way to the left side of the page. The 
element doesn't necessarily flow around the floated element, but its contents 
do. The background color and border of paragraph 3 still take up as much 
space as they normally would if paragraph 2 didn't exist. 

This is because a floated element is removed from the normal flow of the 
page. Paragraph 3 has access to the space once occupied by paragraph 2, 
but the text in paragraph 3 will try to find its own space without stepping on 
text from paragraph 2. 



Somehow, you need to tell paragraph 3 to move away from the paragraph 2 
space. This isn't a difficult problem to solve once you recognize it. Figure 1-6 
shows a solution. 



Figure 1-6: 

The left 
margin of 
paragraph 3 
is set to give 
a two- 
column 
effect. 
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Specifying the width 



Paragraph 1 . This paragraph has the normal behavior of a block- level element. It takes up the entire width of the page, and the next 
element is placed underneath. 



Paragraph 2. This paragraph is floated left. The next element will be 
placed to the light of it. Now this has a width of 50%. 



Paragraph 3. Tins paragraph now has a margin- left so it is 
separated from the previous paragraph. It's width is still 
automatically determined. 



-s / 0 warnings Q fl Now: Clear, 53 : F 
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The margin- left property of paragraph 3 is set to 53 percent. Because the 
width of paragraph 2 is 50 percent, this provides a little gap between the 



<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 



<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>f loatWidthMargin.html</title> 
<style type = " text/ess "> 
P { 

border: 2px black solid; 

} 

. floated { 
float: left; 
width: 50%; 

} 

. right { 
margin-left: 52%; 



</style> 
</head> 
<body> 

<hl>Specifying the width</hl> 
<p> 

Paragraph 1 . 

This paragraph has the normal behavior of a block-level element. 
It takes up the entire width of the page, and the next element 
is placed underneath. 
</p> 

<p class = 11 floated" > 
Paragraph 2 . 
This paragraph is floated left. The 

next element will be placed to the right of it. Now this has a width 
of 50%. 
</p> 

<p class = " right "> 
Paragraph 3 . 

This paragraph now has a margin-left so it is separated from the 
previous paragraph. It's width is still automatically 
determined. 




ins. Take a look at the code to see what's going on here: 



<head> 



} 



</p> 



</body> 
</html> 



Using Float to Style Forms 



Many page layout problems appear to require tables. Some clever use of the CSS 
float can help elements with multiple columns without the overhead of tables. 
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Forms cause a particular headache because a form often involves labels in a 
left column followed by input elements in the right column. You'd probably 
ed to put such a form in a table. Adding table tags will make the 
ch more complex and isn't required. It's much better to use CSS to 
manage the layout. 



You can float elements to create attractive forms without requiring tables. 
Figure 1-7 shows a form with float used to line up the various elements. 

As page design gets more involved, it makes more sense to think of the HTML 
and the CSS separately. The HTML will give you a sense of the overall intent 
of the page, and the CSS can be modified separately. Using external CSS is a 
natural extension of this philosophy. Begin by looking at floatForm.html 
and concentrate on the XHTML structure before worrying about style: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 
<title>f loatForm.html</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "floatForm.css" /> 

</head> 



Figure 1-7: 

This is a 
nice-looking 
form defined 
without a 
table. 
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<body> 

<form action = ""> 
<f ieldset> 

<label>Name</ label > 
< input type = "text" 

id = " txtName " / > 
<label>Address</label> 
< input type = "text" 

id = "txtAddress" /> 
<label>Phone</label> 
<input type = "text" 

id = "txtPhone" /> 
<button type = "button" > 

submit request 
</button> 
</fieldset> 
</form> 
</body> 
</html> 



While you look over this code, note several interesting things about the way 
the page has been designed: 

♦ The CSS is external. CSS is defined in an external document. This makes 
it easy to change the style and helps you to focus on the XHTML docu- 
ment in isolation. 

♦ The XHTML code is minimal. The code is very clean. It includes a form 
with a f ieldset. The f ieldset contains labels, input elements, and a 
button. 

♦ There isn't a table. There's no need to add a table as an artificial organi- 
zation scheme. A table wouldn't add to the clarity of the page. The form 
elements themselves provide enough structure to allow all the format- 
ting you need. 

♦ Labels are part of the design. I used the label element throughout the 
form, giving me an element that can be styled however I wish. 

♦ Everything is selectable. I'll want to apply one CSS style to labels, 
another to input elements, and a third style to the button. I've set up the 
XHTML so I can use CSS selectors without requiring any id or class 
attributes. 

♦ There's a button. I used a button element instead of <input type = 
"button" > on purpose. This way, I can apply one style to all the input 
elements and a different style to the button element. 

It's wonderful when you can design a page like this one so its internal struc- 
ture provides all the selectors you need. This keeps the page very clean and 
easy to read. Still, don't be afraid to add classes or IDs if you need them. 

Figure 1-8 demonstrates how the page looks with no CSS. 
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Figure 1-8: 

The plain 
XHTML is a 
start, but 
some CSS 
would help 
a lot. 
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It's often a good idea to look at your page with straight XHTML before you 
start messing around with CSS. 

If you have a page with styles and you want to see how it will look without 
the style rules, use the Web Developer toolbar. You can temporarily disable 
some or all CSS style rules to see the default content underneath. This can 
sometimes be extremely handy. 

Using float to beautify the form 

It'd be very nice to give the form a tabular feel, with each row containing a 
label and its associated input element. My first attempt at a CSS file for this 
page looked like this: 
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/ * f loatNoClear . ess 

CSS file to go with float form 

Demonstrates use of float, width, margin 

Code looks fine but the output is horrible. 



fieldset { 

background-color : #AAAAFF ; 

} 

label { 

float: left; 
width: 5em; 
text-align: right; 
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inp- 



margin-right : . 5em; 

} 

input { 

round-color: #CCCCFF; 
: left; 



button { 

float: left 
width: lOem 
margin-left: 7 em; 
margin-top: lem; 
background-color: #0000CC; 
color: #FFFFFF; 



This CSS looks reasonable, but you'll find it doesn't quite work right. (I show 
the problem and how to fix it later in this chapter.) Here are the steps to 
build the CSS: 



/. Add colors to each element. 

Colors are a great first step. For one thing, they help you be sure that 
your selectors are working correctly so that everything's where you think 
it is. This color scheme has a nice modern feel to it, with a lot of blues. 

2. Float the labels to the left. 

Labels are all floated to the left, meaning they should move as far left as 
possible, and other things should be placed to the right of them. 

3. Set the label width to 5em. 

This gives you plenty of space for the text the labels will contain. 

It. Set the labels to be right-aligned. 

Right-aligning the labels will make the text snug up to the input ele- 
ments but give them a little margin-right so the text isn't too close. 

5. Set the input's float to left. 

This tells each input element to go as far to the left (toward its label) as 
it can. The input element goes next to the label if possible and on the 
next line, if necessary. Note that like images, input elements have a 
default width, so it isn't absolutely necessary to define the width in CSS. 

6. Float the button, too, but give the button a little top margin so it has 
a respectable space at the top. Set the width to 10 em. 



This seems to be a pretty good CSS file. It follows all the rules, but if you apply 
it to floatForm.html, you'll be surprised by the results shown in Figure 1-9. 
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Figure 1-9: 

This form 
is — well- 
ugly. 
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Book III 

After all that talk about how nice float-based layout is, you're probably Chapter 1 

expecting something a bit neater. If you play around with the page in your 
browser, you'll find that everything works well when the browser is narrow, 
but when you expand the width of the browser, it gets ugly Figure 1-10 
shows the form when the page is really skinny. (I used the CSS editor on the 
Web Developer toolbar to adjust the width of the page display.) |" S. 



Things get worse when the page is a little wider, as you can see in Figure 1-11. 

If you make the page as wide as possible, you'll get a sense of what the 
browser was trying to accomplish in Figure 1-12. 

When CSS doesn't do what you want, it's usually acting on some false 
assumptions, which is the case here. Floating left causes an element to go as 
far to the left as possible and on the next line, if necessary. However, that's 
not really what you want on this page. The inputs should float next to the 
labels, but each label should begin its own line. The labels should float all 
the way to the left margin with the inputs floating left next to the labels. 
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Figure 1-10: 

The form 
looks great 
when the 
page is 
skinny. 
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CSS file to go with float form 
I'S^r.stratea use of fleet, width, margin 
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i - 
label { 

float: left; 

width: Sen; 

text-align; right; 

margin-right: . 5 em ; 

} 



width: idea; 
mnrgin-lef t : Tea 
margin-top: leu; 
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Figure 1-11: 

With a 

slightly 

wider 

browser, 

things get 

strange. 
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/* floatNcClear.css 

CSS file to go with float form 
remonstrates use of float, width, margin 
Code looks fine but the output is horrible. 



width: 5ea; 

reit- align: right; 

mar gin- right : . 5em; 



bacicgri 



float: left; 
width: lOem; 
margin- left: ~em; 
margin-top: lem; 
ti:k-gr:ur.d-color: *D000CC; 
color: #FFFFFF; 



- 
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Figure 1-12: 

The 

browser is 
trying to put 
all the 
inputs on 
the same 
line. 
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label { 

float: left 
width: 5em; 
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}^ 

bat: St ground- 
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button { 
float: left 
width: Idem 
margin- left 
margin-top; 
baclcground- 
colcr: #FFF 
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Adjusting the fietdset Width 



One approach is to consider how well the page behaves when it's skinny 
because the new label and input combination will simply wrap down to the 
next line. You can always make a container narrow enough to force the behav- 
ior you're expecting. Because all the field elements are inside the f ieldset, 
you can simply make it narrower to get a nice layout, as shown in Figure 1-13. 

When you want to test changes in CSS, nothing beats the CSS editor in the 
Web Developer Extension. I made Figure 1-13 by editing the CSS on the fly 
with this tool. You can see that the new line of CSS is still highlighted. 

Setting the width of the f ieldset to 15em does the job. Because the widths 
of the other elements are already determined, forcing them into a 15 em-wide 
box makes everything line up nicely with the normal wrapping behavior of 
the float attribute. If you don't want the width change to be so obvious, 
you can apply it to the form element, which doesn't have any visible attrib- 
utes (unless you add them, like color or border). 
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Unfortunately, this doesn't always work because the user may adjust the 
font size and mess up all your careful design. 
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Figure 1-13: 

With a 
narrower 
fieldset, all 
the 

elements 
look much 
nicer. 
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Using the clear attribute to control page layout 

Adjusting the width of the container is a suitable solution, but it does feel 
like a bit of a hack. There should be some way to make the form work right, 
regardless of the container's width. There is exactly such a mechanism. 

The clear attribute is used on elements with a float attribute. The clear 
attribute can be set to left, right, or both. Setting the clear attribute to 
left means you want nothing to the left of this element. In other words, the ele- 
ment should be on the left margin of its container. That's exactly what you want 
here. Each label should begin its own line, so set its clear attribute to left. 

To force the button onto its own line, set its clear attribute to both. This 
means that the button should have no elements to the left or the right. It 
should occupy a line all on its own. 

If you want an element to start a new line, set both its float and clear 
attributes to left. If you want an element to be on a line alone, set float to 
left and clear to both . 

Using the clear attribute allows you to have a flexible-width container and 
still maintain reasonable control of the form design. Figure 1-14 shows that 
the form can be the same width as the page and still work correctly. This 
version works, no matter the width of the page. 
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floatForm.html - Mozilla Firefox 




Figure 1-14: 

When you 
apply clear 
to floating 
elements, 
you can 
control the 
layout. 



U*l [Ll fie:///C:^ogram%20Files.(sanpo.Andocs/xfd/xfti3/xfti3. i/floatF 0 ™.hW 
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fieldset ( 
fcacJcgrcur.d-color: #j 

} 

float: left; 
width) 5em; 
text-align: right; 
margin-right : . 5 ess; 



input { 

float: left; 

Eaclcgrcund-ceior: *"™FF; 



i I 



:lear: both; 
:argin-Left: 7em; 
largio-tQp: lem; 
>ackground-color: ♦OOOOCC; 
:olor: *FFFFFF; 



l>_. 



0 errors / 0 warnings © f Now: Clear, 53 : F 



Here's the final CSS code, including clear attributes in the labels and button: 
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/* float Form .ess 

CSS file to go with float form 

Demonstrates use of float, width, margin, and clear 

*/ 

fieldset { 

background-color: #AAAAFF ; 

} 
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label { 

clear: left; 
float: left; 
width: 5em; 
text-align: right; 
margin-right: . 5em; 



input { 

float: left; 

background-color: #CCCCFF; 

} 
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button { 

float: left 
: both 

n-left: 7 em; 
margin-top: lem; 
background-color: #0000CC; 
color: #FFFFFF; 

} 



You now have the basic tools in place to use flow layout. Look to Chapter 2 
of this minibook to see how these tools are put together to build a complete 
page layout. 



Chapter 2: Building Floating 
DropBOQte^ Layouts 



In This Chapter 

v Creating a classic two-column page 
j-" Creating a page-design diagram 
w Using temporary borders 

v 0 Creating fluid layouts and three-column layouts 
K" Working with and centering fixed-width layouts 



The floating layout technique provides a good alternative to tables, frames, 
and other layout tricks formerly used. You can build many elegant multi- 
column page layouts with ordinary XHTML and CSS styles. 



Creating a Basic Tu/o- Column Design 

Many pages today use a two-column design with a header and a footer. Such a 
page is quite easy to build with the techniques you read about in this chapter. 

Designing the page 

It's best to do your basic design work on paper, not on the computer. Here's 
my original sketch in Figure 2-1. 

It's important to draw the sketch first so you have some idea what you're 
aiming for. Your sketch should include the following information: 

♦ Overall page flow: How many columns do you want? Will it have a 
header and a footer? 

♦ Section names: Each section needs a name. This will be used in both 
the XHTML and the CSS. 

♦ Width indicators: How wide will each column be? (Of course, these 
widths should add up to 100 percent or less.) 

♦ Fixed or percentage widths: Are the widths measured in percentages 
(of the browser size) or in a fixed measurement (pixels)? This has 
important implications. For this example, I'm using a dynamic width 
with percentage measurements. 
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Font considerations: Do any of the sections require any specific font 
styles, faces, or colors? 



lor scheme: What are the main colors of your site? What will be the 
lor and background color of each section? 



This particular sketch (in Figure 2-1) is very simple because the page will 
use default colors and fonts. For a more complex job, you'll need a much 
more detailed sketch. The point of the sketch is to separate design decisions 
from coding problems. Solve as much of the design stuff as possible first so 
you can concentrate on building the design with XHTML and CSS. 







Header - centered text 








Left 




Right 








20% 
wide 




80% wide 
Newspaper style - 
all grayscale, single 
and double borders 
























Figure 2-1: 

This is a 
very 
standard 
two-column 








style. 


Footer - centered text 
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^H^oQe^uij^to^rJltail and control, you'll find 
this chapter frustrating. People accustomed to 
having complete control of a design (as you 
often do in the print world) tend to get really 
stressed when they realize how little actual 
control they have over the appearance of a 
Web page. 

Really, it's okay. This is a good thing. When you 
design for the Web, you give up absolute con- 
trol, but you gain unbelievable flexibility. Use 



A note to perfectionists 



the ideas outlined in this chapter to get your 
page looking right on a standards-compliant 
browser. Take a deep breath and look at it on 
something else (like Internet Explorer 5 [IE5] if 
you want to suffer a heart attack!). Everything 
you positioned so carefully is all messed up! 
Take another deep breath and use conditional 
comments to fix the offending code without 
changing how it works in those browsers that 
do things correctly. 



Buitdinq the XHTML 



After you have a basic design in place, you're ready to start building the 
XHTML code that will be the framework. Start with basic CSS but create a div 
for each section that will be in your final work. You can put a placeholder for 
the CSS, but don't add any CSS yet. Here's my basic code (I removed some of 
the redundant text to save space): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 

<title>twoColumn.html</title> 

<link rel = "stylesheet" 

type = "text/ess" 

href = 11 twoCol . ess" /> 

</head> 
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<body> 

<div id = 11 head "> 

<hl>Two Columns with Float</hl> 
</div> 

<div id = "left"> 

<h2>Left Column</h2> 
</div> 

<div id = 11 right "> 

<h2>Right Column</h2> 
</div> 



<div id = 11 footer "> 

<h3>Footer</h3> 
</div> 
</body> 
</html> 
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What's up with the Latin? 



flefllbfe Ityoffts built throughout this chapter 
require some kind of text so the browser knows 
how big to make things. The actual text isn't 
important, but something needs to be there. 

Typesetters have a long tradition of using phony 
Latin phrases as filler text. Traditionally, this text 
has begun with the words "Lorem Ipsum," so 
it's called Lorem Ipsum text. 

This particular version is semi-randomly gen- 
erated from a database of Latin words. 



If you want, you can also use Lorem Ipsum in 
your page layout exercises. Conduct a search for 
Lorem Ipsum generators on the Web to get as 
much fake text as you want for your mockup 
pages. 

Although Lorem Ipsum text is useful in the 
screen shots, it adds nothing to the code listings. 
Throughout this chapter, I remove the Lorem 
Ipsum text from the code listings to save space. 
See the original files on the CD-ROM or Web site 
for the full pages in all their Cesarean goodness. 



Nothing at all is remarkable about this XHTML code, but it has a few impor- 
tant features, such as 

♦ It's standards-compliant. It's good to check and make sure the basic 
XHTML code is well-formed before you do a lot of CSS work with it. 
Sloppy XHTML can cause you major headaches later. 

♦ It contains four divs. The parts of the page that will be moved later are 
all encased in div elements. 

♦ Each div has an ID. All the divs have an ID determined from the sketch. 

♦ No formatting is in the XHTML. The XHTML code contains no formatting 
at all. That will be left to the CSS. 

4- It has no style yet. Although a link tag is pointing to a style sheet, the 
style is currently empty. 

Figure 2-2 shows what the page looks like before you add any CSS to it. 

Adding preliminary CSS 

You can write CSS in your editor, but the Web Developer toolbar's CSS editor 
is an especially handy tool because it allows you to see the effects of your 
CSS immediately. To use this tool 

7. Use Firefox for your primary testing. 

Firefox has much better standards support than IE. Get your code work- 
ing in Firefox first. Besides, the extremely handy Web Developer isn't 
available for Internet Explorer. 
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Figure 2-2: 

The plain 
XHTML is 
plain 
indeed; 
some CSS 
will come in 
handy. 



twoColumn.html - Mozilla Firefox 




Bootonarks Toots Help 



cs/jrfd/xfd 3/xfd 3 . 2/twoColumn . h M 
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. umns with Float 



Left Column 

Lorem ipsum dolor sit amet, consectetuer adipisdng elit. Yh-amus dui Suspendisse potenti Ut dui quam, Clara Prima, lacinia ac, fringiJla et, justo Matteus SquirreHus 
erat, elementum quis, rhoncus non, posuere nec, neque. Jacobus et diam eu orci placerat iiiterduin. Sed sapien. Yestibulum ^Tverra dapibus odio. Nunc vel Benjamis. 
Yh "auras porta ipsum at lectus In condimentum rnetus 

Right Column 

Lorem ipsurn dolor sit amet, consectetuer adipiscing elit. Yrvamus dui. Suspendisse potenti. Ut dui quam, Clara Prima, lacinia ac, fringiJla et, justo Matteus Squirrelius 
erat, elementum quis, rhoncus non, posuere nec, neque. Jacobus et diam eu orci placerat interdum. Sed sapien Yestibulurn vrverra dapibus odio Ximc vel Benjamis. 
\ rvamus porta ipsum at lectus. In condimentum metus. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus dui Suspendisse potenti. Ut dui quam, Clara Prima, lacinia ac, fringilla et, justo Matteus Squirrelius 
erat, elementum quis, rhoncus non, posuere nec, neque Jacobus et diam eu orci placerat interdum Sed sapien YesDbuluin vrverra dapibus odio Nunc vel Benjamis 
Vh-amus porta ipsum at lectus In condimentum metus. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Yrvamus dui. Suspendisse potenti U't dui quam, Clara Prima, lacinia ac, fringilla et, justo Matteus Squirrelius 
erat, elementum quis, rhoncus non, posuere nec, neque Jacobus et diam eu orci placerat interdum Sed sapien. Yestibuhim vivma dapibus odio Nunc vel Benjamis. 
Yrvamus porta ipsum at lectus In condimentum metus. 
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4. Create CSS rules. 

Type the CSS rules in the provided window. Throughout this chapter, I 
show what rules you use and the order in which they go. The key thing 
about this editor is you can type a rule in the text window, and the page 
in the browser is immediately updated. 

5. Check the results. 

Watch the main page for interactive results. As soon as you finish a CSS rule, 
the Web page automatically refreshes, showing the results of your work. 

6. Save your work. 

The changes made during an edit session are temporary. If you've specified 
a CSS file in your document, but it doesn't exist, the Save button automat- 
ically creates and saves to that file. 



Book III 

2. Be sure the Web Developer toolbar is installed. Chapter 2 

See Chapter 3 of Book I for more information on this wonderful free tool. m 

You'll use this tool to modify your CSS and see the results immediately tj S. 

in the Web browser. <= ~ 

- r-<° 

3. Activate the CSS editor by choosing ToolsOEdit CSS or pressing ^ zi 

Ctrl+Shift+E. I I 
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Usinq temporary borders 

|""N ["^ lAndnow for one of my favorite CSS tricks. . . . Before doing anything else, 

1 [ Q |*^ rj Iwefif a selector for each of the named divs and add a temporary border to 



"rliv. Make each border a different color. The CSS might look like this: 



#head { 

border: lpx black solid; 



#left { 

border: lpx red solid; 



#right { 

border: lpx blue solid; 



#footer { 

border: lpx green solid; 



You won't keep these borders, but they provide some very useful cues while 
you're working with the layout: 



♦ Testing the selectors: While you create a border around each selector, 
you can see whether you've remembered the selector's name correctly. 
It's amazing how many times I've written code that I thought was broken 
just because I didn't write the selector properly. 

♦ Identifying the divs: If you make each div's border a different color, it'll 
be easier to see which div is which when they begin to overlap. 

♦ Specifying the size of each div: The text inside a div isn't always a good 
indicator of the actual size of the div. The border tells you what's really 
going on. 



Of course, you won't leave these borders in place. They're just helpful tools 
for seeing what's going on during the design process. Look at borders . 
html and borders . ess on the CD-ROM or Web site to see the full code. 



Figure 2-3 displays how the page looks with the color borders turned on. 




It's fine that you can't see the actual colors in the black and white image in 
Figure 2-3. Just appreciate that when you see the page in its full-color splen- 
dor, the various colors will help you see what's going on. 
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Figure 2-3: 

Colored 
borders 
make it 
easierto 
manipulate 
the divs. 



^oolOTiarks Tools Hefc> 



Left Column 

This is the left column Tilts is the left column. This is the left column. This is the left column This is the left column This is the left column This is the left column. 
Tliis is the left column. This is the left column. Tliis is the left column. This is the left column. This is the left column. This is the left column. This is die left column. 
This is the left column. Tliis is the left column. Tliis is the left column. Tliis is the left column. This is the left column. 



jflfr | U ffe:///C: ) T^ogr^°/ n 2CF 1 l M fxflrrOT,^tdocs.^.'xfd3.'xfd3.2A;ordefs.htiiil 
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Right Column 

Tliis is the right column. This is the right column Tliis is the right column. This is the right column This is the right column This is the right column This is the right 
:ohmin This is the right column This is the right column. This is the right column This is the right column Tliis is the right column Tliis is the right column This is 
the right column This is the right column. Tliis is the right column. This is the right column. 

Right Column 

Tliis is the right column Tliis is the right column Tliis is the right column This is the right column This is the right column This is the right column Tliis is the right 
column. This is the right column. Tliis is the right column. Tliis is the right column Tliis : the :'izht column .his i; the risrht column ihis is the risrht :c hrim Tin; is 
the right column This is the right column. This is the right column. This is the right column. 

Right Column 

This is the right column. This is the right column. This is the right column. This is the right column. This is the right column. Tliis is the right column, .his is the right 
column This is the right column. This is the right column. This is the right column Tliis is the right column. Tliis is the right column This is the right column. This is 

■he nodr column Tlik i> the ricfit column This i< the rieht rnhtnwi This is the ncht mhtmil ,. ^ „ X" 

Done 0 errors /O warnings © 0 Now: Clear, 80" F Thu:35-F Fri:90"F 



Setting up the floating columns 

This particular la 
will do the trick: 
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This particular layout doesn't require major transformation. A few CSS rules ro 
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#head { ST™ 

border: 3px black solid; "o o" 

} £ 21 

c/> =' 

ta 

#left { 

border: 3px red solid; 
float: left; 
width: 2 0%; 

} 

#right { 

border: 3px blue solid; 
float: left; 
width: 75% 

} 

♦footer { 

border: 3px green solid; 
clear: both; 

} 
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I made the following changes to the CSS: 

Soat the #lef t div. Set the #lef t div's float property to left so 
her divs (specifically the ttright div) are moved to the right of it. 

♦ Set the #lef t width. When you float a div, you must also set its width. 
I've set the margin to 20 percent of the page width as a starting point. 

♦ Float the #right div, too. The right div can also be floated left, and it'll 
end up snug to the left div. Don't forget to add a width. I set the width of 
#right to 75 percent, leaving another 5 percent available for padding, 
margins, and borders. 

♦ Clear the footer. The footer should take up the entire width of the page, 
so set its clear property to both. 

Figure 2A shows how the page looks with this style sheet in place (see floated . 
html and floated, ess on the CD-ROM or Web site for complete code). 

Tuning up the borders 

The colored borders in Figure 2-4 point out some important features of this 
layout scheme. For instance, the two columns are not the same size. This 
can have important implications. 
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Figure 2-4: 

Now, the 
left column 
is floated. 



\§ floated.html - Mozilla Firefox 
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Two Columns with Float 



Left Column 

This is the left column. This is 
Dae left column. This is tie left 
column. Tins is die left column. 
Tliis is the left cohmm. This is 
the left column. Tliis is the left 
column This is the left column 
This is the left column. This is 
the left column Tliis is the left 
column This is me left column 
Tliis is the left column. This is 
the left column This is the left 
nn. This is the left column. 
Tliis is the left cohmm. This is 
the left column Tliis is the left 
column 



Right Column 

This is the right column This is the right column This is the right column. This is the right column. This is the right column. 
This is the right column This is the right column. This is the right column This is the right column. Tliis is the right cohmm. 
Tliis is the right column. This is the right column. Tliis is the right column. This is the right column. Tliis is the right column. 
This is the right column This is the right cohmm 

Right Column 

Tliis is the right column. This is the right column. This is the right column. This is the right cohmm. Tliis is the right column. 
This is the right column This is the right column This is the right cohmm This is the right column. Tliis is the right column 
This is the right cohmm This is the right column This is the right cohmm This is the right column This is the right column 
Tliis is the right cohmm. Tliis is the right column. 

Right Column 

Tliis is the right cohmm This is the right cohmm This is the right column This is the right column This is the right column. 
This is the right column This is the right column This is the right column. This is the right column Tliis is the right column. 
Tliis is the right column. This is the right column. This is the right column. This is the right cohmm Tliis is the right column. 
This is the right column. This is the right column. 
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You can change the borders to make the page look more like a column layout. 
I'm going for a newspaper-style look, so I'll use simple double borders. I put a 
der under the header, a gray border to the left of the right column, 
y border on top of the bottom column. Tweaking the padding and 
centering the footer complete the look. Here's the complete CSS: 



#head { 

border-bottom: 

} 

#left { 
float: 
width: 

} 

#right { 
float: 
width: 



3px double blacks- 



left; 
2 0%; 



left; 
75%; 



} 



border-left: 3px double gray; 

Hooter { 
clear: both; 
text-align: center; 
border- top: 3px double gray; 



} 



The final effect is shown in Figure 2-5. 



Figure 2-5: 

This is a 

decent 

design, 

which 

adjusts with 

the page 

width. 
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Two Columns with Float 



Left Column 

Lorem ipsurn dolor sit aniet 
consectetuer adipiscing elit. 
Yrvamus dui Suspendisse 
potenti. Ut dui quam, Clara 
Prima, lacinia ac, fringilla et, 
juste Matteus Squirrelius erat, 
elementum quis, rhoncus non, 
posuere nec, neque Jacobus et 
diam eu orci placerat inter dum. 
Sed sapien. Vestibuiurn vherra 
dapibus odio. Nunc vel 
Benjamis. Yrvamus porta ipsum 
at lectus In eondimentum metus. 



Right Column 



Lorem ipsum dolor sit aniet, consectetuer adipiscing elit Vivamus dui Suspendisse potenti Ut dui quam, Clara Prima, lacinia 
ac, fnngjlla et, justo. Matteus Squirrelius erat : elementum quis, rhoncus non, posuere nec, neque. Jacobus et diam eu orci 
placerat interdum Sed sapien Yestibuhini viverra dapibus odio Nunc vel Benjamis. \'h amus porta ipsum at lectus. In 
eondimentum metus. 

Lorem ipsum dolor sit aniet, consectetuer adipiscing elit. Vivamus dui. Suspendisse potenti. Ut dui quam, Clara Prima, lacinia 
ac, inr.rilla et, iusto. Matteus Squirrelius erat, elementum quis, rhoncus non, posuere nec, neque. Jacobus et diam eu orci 
placerat interdum. Sed sapien. Vestibulum viverra dapibus odio. Xunc vel Benjamis. Yivanius porta ipsum at lectus In 
eondimentum metus 



Lorem ipsum dolor sit amet, con;ectetuer adisjiscing elit \ rvamus dui Suspend:;; 
ac, fringilla et, justo. Matteus Squirrelius erat, elementum quis, rhoncus non, posuc 
placerat interdum. Sed sapien. Vestibuluni vrverra dapibus odio. Nunc vel Benjan 
coiidiinentum metus. 



potenti. Ut dui quam, Clara Prima, lacinia 
e nec, neque Jacobus et diam eu orci 
s. Vivamus porta ipsuru at lectus. In 
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Advantages of a fluid layout 

IThistype of layout scheme (with floats) is often called a fluid layout because 
fcChlScolumns but the sizes of the columns are dependent on the browser 
Hwfrn. This is an important issue because, unlike layout in the print world, 
you really have no idea what size the browser window that displays your page 
will be. Even if the user has a widescreen monitor, the browser may be in a 
much smaller window. Fluid layouts can adapt to this situation quite well. 

Fluid layouts (and indeed all other float-based layouts) have another great 
advantage. If the user turns off CSS or can't use it, the page still displays. The 
elements will simply be printed in order vertically, rather than in the 
intended layout. This can be especially handy for screen readers or devices 
with exceptionally small screens, like phones and PDAs. 



Building a Three-Column Design 

Sometimes, you'll prefer a three-column design. It's a simple variation of the 
two-column approach. Figure 2-6 shows a simple three-column layout. 



Figure 2-6: 

This is a 
three- 
column 
floating 
layout. 
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Left Column 

Lorem ipsum dolor sit amet, 
consectetuer adipiscing eHt. 
Yivamus dui. Suspendisse 
potenti. Ut dui quam, Clara 
Prima, lacinia ac, fringjlLa et, 
justo. Matteus Squirrelius erat, 
elementum quis, rhoncus non, 
posuere nec, neque. Jacobus et 
diain eu orci piacerat interduni. 
Sed sapien Yestibulurn \r. erra 
dapibus odio Nunc vel 
Benjamis Yivamus porta ipsuni 
atlectus In condimentum metus 



Three-Column Layout 



Center Column 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Vivanms dud. Suspendisse potenti Ut dui 
quam, Clara Prima, lacinia ac, fringilla et, justo. Matteus Squirrelius erat, elemeutum quis, rhoncus 
non. posuere nec. neque Jacobus et diam eu orci piacerat interdum Sed sapien Yestibutum viverra 
dapibus odio Xunc vel Benjamis Yh-amus porta ipsum atlectus In condimentum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscinz elit. \ rvamu; dui Suspendisse potenti. Ut dui 
quam, Clara Prima, lacinia ac, fringilla et, justo. Matteus SquiiTelius erat, elementum quis, rhoncus 
non, posuere nec, neque. Jacobus et diam eu orci piacerat interdum. Sed sapien. Yestibulum ATverra 
dapibus odio Xunc vel Benjamis Vivanms porta ipsum atlectus In condimentum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Vivanius dui. Suspendisse potenti L"t dui 
quam, Clara Prima, lacinia ac, fringilla et, juste. Matteus Squirrelius erat, elementum quis, rhoncus 
non, posuere nec, neque Jacobus et diam eu orci piacerat interdum Sed sapien Yestibuluni Arverra 
dapibus odio Nunc vel Benjamis Yivamus porta ipsum atlectus In condimentum metus. 



Right Column 

Lorem ipsum dolor sit amet, 
consectetaer adipiscing elit. 
Yivamus dui. Suspendisse 
potenti Ut dui quam, Clara 
Prima, lacinia ac, fringilla et, 
justo. Matteus Squirrelius 
erat, elementum quis, 
rhoncus non, posuere nec, 
neque. Jacobus et diam eu 
orci piacerat interdum. Sed 
sapien. Yestibuhim \iverra 
dapibus odio Xunc vel 
Benjamis. Yivamus porta 
ipsum at lectus. In 
condimentum metus 
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This design uses very basic CSS with five named divs. Here's the code (with 
the dummy paragraph text removed for space): 



html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
.w3 .org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>threeColumn . html</ title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = " threeColumn. ess " /> 

</head> 



<body> 

<div id = "head"> 

<hl>Three-Column Layout</hl> 
</div> 



<div id = "left"> 

<h2>Left Column</h2> 
</div> 

<div id = " center "> 

<h2>Center Column</h2> 
</div> 



<div id = " right "> 

<h2>Right Column</h2> 

</div> Book III 

Chapter 2 



<div id = " footer "> 

<h3>Footer</h3> 
</div> 



00 



-n — 

</body> a) — 

</html> ™ -■ 

r-m 
| 2 

Styling the three-column page 1 1. 

As you can see from the HTML, there isn't really much to this page. It has a 
five named divs, and that's about it. All the really exciting stuff happens in 
the CSS: 



#head { 

text-align: center; 

} 



#left { 

float: left; 
width: 2 0%; 
padding-left: 1%; 



#center { 

float: left; 
width: 60%; 
padding-left: 1%; 
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#right { 
float: 



.: left; 
1: 17%; 
.ng-left: 1%; 




#footer { 

border: Ipx black solid; 
float: left; 
width: 100%; 
clear: both; 
text-align: center; 



Each element (except the head) is floated with an appropriate width. The 
process for generating this page is similar to the two-column layout: 

/. Diagram the layout. 

Begin with a general sense of how the page will look and the relative 
width of the columns. Include the names of all segments in this diagram. 

2. Create the XHTML framework. 

Create all the necessary divs, including id attributes. Add representa- 
tive text so you can see the overall texture of the page. 

3. Add temporary borders. 

Add a temporary border to each element so you can see what's going on 
when you start messing with float attributes. This also ensures you 
have all the selectors spelled properly. 

4. Float the leftmost element. 

Add the float attribute to the leftmost column. Don't forget to specify a 
width (in percentage). 

5. Check your work. 

Either work in the Web Developer CSS editor (where you can see changes 
on the fly) or frequently save your work and view it in a browser. 

6. Float the center element. 

Add float and width attributes to the center element. 

7. Float the right-most element. 

Incorporate float and width in the right element. 

8. Ensure all the widths total around 95 percent. 

You'll want the sum of the widths to be nearly 100 percent but not quite. 
You'll generally need a little space for margins and padding. Final adjust- 
ments come later, but you certainly don't want to take up more than 100 
percent of the available real estate. 



Building a Three-Column Design 283 



9. Float and clear the footer. 



DropBooki 



jet the footer acting right, you'll need to float it and clear it on both 
gins. Set its width to 100 percent, if you want. 



10. Tune up. 

Remove the temporary borders, adjust the margins and padding, and set 
alignment as desired. Use percentages for margins and padding, and then 
adjust so all percentages equal 100 percent. 



j\\NG.' 




Early versions of Internet Explorer (6 and earlier) have a well-documented 
problem with margins and padding. According to the standards, the width of 
an element is supposed to be the width of the content, with borders, margins, 
and padding outside. A properly-behaved browser won't shrink your content 
when you add borders and margins. The early versions of Internet Explorer 
(IE) counted the width as including all borders, padding, and margin, effec- 
tively shrinking the content when you added these elements. If your page 
layout is looking a little off with IE, this may be the problem. Use the condi- 
tional comment technique described in Chapter 5 of Book II to make a variant 
style for IE if this bothers you. 



Problems With the f bating layout 

The floating layout solution is very elegant, but it does have one drawback. 
Figure 2-7 shows the three-column page with the borders drawn around each 
element. 



5 threeColumnMinHeight.html - Mozilla Firefox 



Figure 2-7: 

The 

columns 
aren't realh 
columns; 
each is a 
different 
height. 
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Left Column 

Lorem ipsum dolor sit amet, 
consectetuer adipiscing eJit 
Ytvamus dui Suspendisse 
potenti. Ut dui quam, Clara 
Prima, lacinia ac, fringilla et, 
justo Matteus Squirreliiis erat, 
elementum quis, rhoncus non, 
posuere nec, neque. Jacobus et 
diaii: t\\ c :"d piarerat iiiterdum. 
Sed sapien Yestibulum viverra 
dapibus odio. Nunc vel 
Benjamis Yivamus porta ipsum 
at lectus In condimentum metus. 



Center Column 

Lorern ipsum dolor sit aniet, consectetuer adipiscing elit \ "tvamus dui. Suspendisse potenti. Ut dui 
quam, Clara Prima, lacinia ac, fringilla et, justo Matteus Squirrelfus erat, elementum quis, rhoncus 
non, posuere nec, neque. Jacobus et diam eu orei placerat interdum Sed sapien Yestibulum viverra 
dapibus odio. Nunc a el Benjamis. Yivamus porta ipsum at lectus In condimentummetus. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Yivamus dui Suspendisse potenti Ut dui 
quam, Clara Prima, lacinia ac, fringilla et, justo Matteus Squirrelkis erat, elementum quis, rhoncus 
non, posuere nec, neque Jacobus et diam eu orei placerat interdum Sed sapien Yestibulum viverra 
dapibus odio Nunc vel Benjamis Yivamus porta ipsum at lectus In condimentum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Yivamus dui Suspendisse potenti. Ut dui 
quam, Clara Prima, lacinia ac, fringilla et, justo Matteus Squirrelkis erat, elementum quis, rhoncus 
non, posuere nec, neque. Jacobus et diam eu orei placerat interdum. Sed sapien Yestibiilum vivwra 
dapibus odio. Nunc vel Benjamis Yivamus porta ipsum at lectus In condimentum metus. 



Right Column 

Lorem ipsum dolor sit 
amet, consectetuer 
adipiscing elit Yivamus 
dui. Suspendisse potenti 
Ut dui quam, Clara 
Prima, lacinia ac, fringilla 
et, justo. Matteus 
Squirrelhis erat, 
elementum quis, rhoncus 
non, posuere nec, neque. 
Jacobus et diam eu orei 
placerat interdum. Sed 
sapien. Yestibulum 
\rverra dapibus odio. 
Nunc vel Benjamis. 
Yivamus porta ipsum at 
lectus In condimentum 
metus. 
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Figure 2-7 shows an important fact about this type of layout. The columns 
are actually blocks, and each is a different height. Typically, I think of a 

n as stretching the entire height of a page, but this isn't how CSS does 
u want to give each column a different background color, for example, 
you'll want each column to be the same height. This can be done with a CSS 
trick (at least, for the compliant browsers). 



Specifying a min-height 

The standards-compliant browsers (all versions of Firefox and Opera, and IE 7) 
support a min-height property. This specifies a minimum height for an ele- 
ment. You can use this property to force all columns to the same height. 
Figure 2-8 illustrates this effect. 

The CSS code simply adds the min-height attribute to all the column 
elements: 



#head { 

text-align: center; 
border-bottom: 3px double gray; 

} 



#left { 

float: left; 
width: 20%; 
min-height: 30em; 
background-color: #EEEEEE; 



#center { 

float: left; 
width: 60%; 
padding-left: 1%; 
padding-right : 1% ; 
min-height: 30em; 



#right { 

float: left; 
width: 17%; 
padding-left: 1%; 
min-height: 30em; 
background-color: #EEEEEE; 



♦footer { 

border: Ipx black solid; 
float: left; 
width: 100%; 
clear: both; 
text-align: center; 
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Figure 2-8: 

The min- 
height 
attribute 
forces all 
columns to 
be the same 
height. 



:hreeColumnMinHeight.html - Mozilla F 



Bookmarks Tods Hob 



Three-Column Layout 



Left Column 

Lorem ipsum dolor sit amet, 
consectetuer adipiscmii elit 
Yivamus dui. Suspendisse 
potenti. Ut dui quam, Clara 
Prima, lacinia ac, fringilla et, 
justo. Matteus Squirrelius erat, 
elementum quis, rhoncus non, 
posuere nec, neque Jacobus et 
diaiti eu orci placerat interdum. 
Sed sapien. Yestibulum 'iiveira 
dapibus odio Xunc vel 
Benjamis Yivamus porta ipsum 
at lectus. In condimentum metus 



Center Column 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Yivanius dui. Suspendisse potenti. Ut dui 
quam, Clara Prima, lacinia ac, fringilla et, justo Matteus Squirrelius erat, elementum quis, rhoncus 
non. posuere nec, neque Jacobus et diam eu orci placerat interdum Sed sapien YesnDulum vrverra 
dapibus odio Xunc vel Benjamis Yivamus porta ipsum at lectus In condimentum metus 

Lorem ipsum dolor sit amet : consectetuer adipiscing elit Vfnum dui. Suspendisse potenti. L t dui 
quam, Clara Prima, laciiiia ac. rimgilla et. juste Matteus Squirrelius erat. elementum quis : rhoncus 
non, posuere nec, neque. Jacobus et diam eu orci placerat interdum Sed sapien Yestibulum \iverra 
dapibus odio Xunc vet Benjamis Yivamus porta ipsum at lectus. In condimentum metus 

Lorem ipsum dolor sit amet, consertetuer adipiscing elit. Yivamus dui Suspendisse potenti. Lt dui 
quam, Clara Prima, laciiiia ac fringilla et, justo Matteus Squirrelius erat, elementum quis, rhoncus 
non, posuere nec, neque. Jacobus et diam eu orci placerat interdum Sed sapien Yestibuhini won 
dapibus odio Xunc vel Benjamis Yivamus porta ipsum at lectus In condimentum metus 



Right Column 

Lorem ipsum dolor sit amet, 
consectetuer adipiscing elil 
Yivamus dui Suspendisse 
potenti Ut dui quam, Clara 
Prima, lacinia ac, fringilla et, 
justo Matteus Squirrelius 
erat, elementum quis, 
rhoncus non, posuere nec, 
neque. Jacobus et diam eu 
orci placerat interdum. Sed 
sapien Yestibulum viverra 
dapibus odio Xunc vel 
Benjamis Yivamus porta 
ipsum at lectus. In 
condimentum metus. 
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Some guesswork is involved still. You have to experiment a bit to determine 
what the min-height should be. If you guess too short, one column will be 
longer than the min-height, and the columns won't appear correctly. If you 
guess too tall, you'll have a lot of empty space at the bottom of the screen. 

Unfortunately, the min-height trick works only with the latest browsers. IE 
versions 6 and earlier don't support this attribute. For these browsers, you 
may need a fixed-width layout. 
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Building a Fixed-Width Layout 

Fluid layouts are terrific. They're very flexible, and they're not hard to build. 
Sometimes, though, it's nice to use a fixed-width layout, particularly if you 
want your layout to conform with a particular background image. 

The primary attribute of a fixed-width layout is the use of a fixed measure- 
ment (almost always pixels), rather than the percentage measurements used 
in a fluid layout. 

Figure 2-9 shows a two-column page with a nicely colored background. 
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fixedWidth.html - Mozilla Firef 
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Figure 2-9: 

A fixed- 
width layout 
can work 
well with a 
background 
image. 
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Fixed Width Layout 



Left Column 

Lorem ipsum dolor sit amet, 
consectetuer adipiscing ett 
Wamus dui Suspendisse 
potenti Ut dui quam, Clara 
Prima, lacinia ac, fringilla et, 
justo Matteus Squirrelius erat, 
elementum quis, rhoncus non, 
posuere nec, neque. Jacobus et 
diani eu orci placerat interduru 
Sed sapien Yestibulum \iveiTa 
dapibus odio Nunc vel 
Benjamis. Wamus porta ipsum 
at lectus In condimentum metus. 



Right Column 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Wamus dui. 

Suspendisse potenti Ut dui quarn, Clara Prima, lacinia ac, fringilla et, 
justo Matteus Squirrelius erat, elementuui quis. rhoncus non, posuere 
nec, neque. Jacobus et diam eu orci placerat interdum Sed sapien. 
Yestibuhmi viverra dapibus odio Nmc vel Benjamis W'amus porta 
tpsvm at lectus In condimcntum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Wamus dui 
Suspendisse potenti Ut dui quam, Clara Prima, lacinia ac, fringilla et, 
justo Matteus Squirrelius crat, elementum quis, rhoncus non, posuere 
nec, neque Jacobus et diam eu orci placerat interdum Sed sapien 
Yestibulum vrverra dapibus odio Nunc vel Benjamis Wamus porta 
qjsum at lectus In condimentum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit W amus dui 
Suspendisse potenti L~t dui quam, Clara Prima, lacinia ac. fringilla et, 
justo. Matteus Squirrelius erat, elementum quis. rhoncus non, posuere 
nec, neque Jacobus et diam eu orci placerat interdum Sed sapien 
Vestibulum viverra dapibus odio Nunc vel Benjamis W amus porta 
ipsum at lectus In condimentum metus 
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Setting up the XHTML 

As usual, the XHTML code is minimal. It contains a few named divs. (Like 
usual, I've removed filler text for space reasons.) 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>f ixedWidth.html</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "fixedWidth.css" /> 

</head> 

<body> 

<div id = " header "> 

<hl>Fixed Width Layout</hl> 
</div> 

<div id = "left"> 

<h2>Left Column</h2> 
</div> 

<div id = " right "> 

<h2>Right Column</h2> 
</div> 



<div id = " footer "> 
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<h3>Footer</h3> 
</div> 

DropBooRs 

Using an image to simulate true columns 

If you need to overcome the limitations of older browsers, you can use a 
background image to simulate colored columns. Figure 2-10 shows the basic 
background image I'm using for this page. 



Figure 2-10: 

This image 
is repeated 
vertically to I 
simulate 
two 

columns. 



The image has been designed with two segments. The image is exactly 640 
pixels wide, with one color spanning 200 pixels and the other 440 pixels. 
When you know the exact width you're aiming for, you can position the 
columns to exactly that size. Here's the CSS code: 
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body { 

background- 
background- 

} 



image: url { "fixedBG.gif " ) 
repeat: repeat-y; 



#header { 

background-color: #e2e393; 
border-bottom: 3px double black; 
text-align: center; 
float: left; 
width: 640px; 
clear: both; 
margin-left: -8px; 
margin-top: -lOpx; 
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#left { 
float 
width 
clear 

} 



left; 
2 00px; 
left; 



ftright { 

float: left; 
width: 440px; 

} 



#footer { 

float: left; 
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width: 640px; 
clear: both; 
text-align: center; 

Aground-color: #e2e393; 
^Jin-left : -8px; 
border-top: 3px double black; 



This code works a lot like the other floating layouts, except for the following 
changes: 



♦ The body has a background image attached. I attached the two-color 
background image to the entire body This will make the page look like it 
has two columns. Remember to set the background-repeat attribute 
to repeat-y so the background repeats indefinitely in the vertical y- 
axis. 

♦ The header and footer areas need background colors or images 
defined so the fake columns don't appear to stretch underneath these 
segments. 

♦ Header and footer will need some margin adjustments. The browsers 
tend to put a little bit of margin on the header and footer divs, so com- 
pensate by setting negative values for margin-left on these elements. 

♦ All measurements are now in pixels. This will ensure that the layout 
corresponds to the image, also measured in pixels. 




If you use a fixed-width layout and the user changes the font size, the results 
will be unpredictable. A fluid layout will change with the font size, but a fixed 
layout may have problems rendering a larger font in the indicated space. 



Building a Centered Fixed-Width Layout 

Fixed-width layouts are common, but they look a little strange if the browser 
isn't the width specified in the CSS. If the browser is too narrow, the layout 
won't work, and the second column will (usually) drop down to the next line. 

If the browser is too wide, the page will appear to be scrunched onto the left 
margin with a great deal of white space on the right. 

The natural solution would be to make a relatively narrow fixed-width design 
that's centered inside the entire page. Figure 2-11 illustrates a page with this 
technique. 

Some have called this type of design (fixed-width floating centered in the 
browser) a jello layout because it's not quite fluid and not quite fixed. 



Building a Centered Fixed-Width Layout 



289 



V fixedWidthCentered.html - Mozilla Firefox 
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Figure 2-11: 

Now the 
fixed-width 
layout is 
centered in 
the browser. 
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Fixed Width Centered Lavout 



Left Column 

Lorem ipsum dolor sit arnet, 
consectetuer adgjiscing ebt 
Yivamus dui. Suspendisse 
potent! Lt dui quam, Clara 
Prima, lacinia ac, mngilla et, 
justo Matteus Squirrelius erat, 
elementum quis, rhoncus non, 
posuere nec, neque Jacobus et 
diam eu orci placerat interdum 
Sed sapien Yestibutum viverra 
dapibus odio Nunc vel 
Benjamis Yivamus porta ipsum 
at lectus m condinienturn nietus 



Right Column 

Lor mii ipsum dolor sit amet, consectetuer adipiscing eht Yivamus dui 

Suspendisse potenti Ut dui quam, Clara Prima, lacinia ac, frinsjla ct, 
justo Matteus SqunTeliu5 erat, elementum quis, rhoncus non, posuere 
nec. neque Jacobus et diatn eu orci placerat interdum Sed sapien 
Yestibuhmi viverra dapibus odio. Nunc vel Benjamis Yivamus porta 
ipsum at lectus In condknentum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit Yivamus dui 
Suspendisse potenti Ut dui quam, Clara Prima, lacinia ac, Singula et, 
juste Matteus Squirrelius erat, elementum quis. rhoncus non, posuere 
nec. neque Jacobus et diam eu orci placerat interdum. Sed sapien. 
Ye suburum viverra dapibus odio Nunc vel Benjamis Yivamus porta 
ipsum at lectus In condtmentum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscing elk Yh amus dui 
Suspendisse potenti. Ut dui quam. Clara Prima, lacinia ac. Singula et, 
justo Matteus Squirrelius erat. elementum quis. rhoncus non, posuere 
nec, neque Jacobus et diam eu orci placerat interdum. Sed sapien 
Yesubulum viverra dapibus odio Nunc vel Benjamis Ytvainus porta 
ipsum at lectus In condinientum metus 
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Making a surrogate body With an aii diV Chap,er2 

In any case, the HTML requires only one new element, an all div that encases n 
everything else inside the body (as usual, I removed the placeholder text): ts B. 

en B: 
a = 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ^<n 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 5 3 

<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> § 0J 

<head> 5f ^' 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 10 
<title>f ixedWidthCentered.html</title> 
<link rel = "stylesheet" 
type = "text/ess" 

href = 11 f ixedWidthCentered. ess " /> 

</head> 



<body> 

<div id = "all"> 
<div id = 11 header "> 

<hl>Fixed Width Centered Layout</hl> 
</div> 



<div id = "left"> 

<h2>Left Column</h2> 
</div> 

<div id = " right "> 

<h2>Right Column</h2> 
</div> 
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<div id = "footer"> 

<h3>Footer</h3> 
</div> 
ldiv> 



The entire page contents are now encapsulated in a special all div. This div 
will be resized to a standard width (typically 640 or 800 pixels). The all ele- 
ment will be centered in the body, and the other elements will be placed 
inside all as if it was the body: 

tall { 

background-image: url ( "fixedBG.gif" ) ; 

background-repeat: repeat-y; 

width: 640px; 

height: 600px; 

margin-left: auto; 

margin-right: auto; 



#header { 

background-color: #e2e393; 
border-bottom: 3px double black; 
text-align: center; 
float: left; 
width: 640px; 
clear: both; 



#right { 

float: left; 
width: 440px; 

} 

#footer { 

float: left; 
width: 640px; 
clear: both; 
text-align: center; 
background-color: #e2e393; 
border-top: 3px double black; 



/html> 




} 



#left { 



float: left; 
width: 2 00px 
clear: left; 
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co^le is very similar to the f ixedwidth. ess style, but it has some 
t new features: 



The background image is now applied to all. The all div is now 

acting as a surrogate body element, so the background image is applied 
to it instead of the background. 

The all element has a fixed width. This element's width will determine 
the width of the fixed part of the page. 

all also needs a fixed height. If you don't specify a height, all will be 
0 pixels tall because all the elements inside it are floated. Set the height 
large enough to make the background image extend as far down as nec- 
essary. 

Center all. Remember, to center divs, you set margin-left and 
margin-right both to auto. 

Do not float all. The margin : auto trick doesn't work on floated ele- 
ments, all shouldn't have a float attribute set. 

Ensure the interior widths add up to all's width. If all has a width of 
640 pixels, be sure that the widths, borders, and margins of all the ele- 
ments inside all add up to exactly 640 pixels. If you go even one pixel 
over, something will spill over and mess up the effect. 



Limitations of the jetto layout 



Jello layouts represent a compromise between fixed and fluid layouts, but 
they aren't perfect: 

♦ Implicit minimum width: Very narrow browsers (like cell phones) can't 
render the layout at all. 

♦ Wasted screen space: If you make the rendered part of the page narrow, 
a lot of space isn't being used in higher-resolution browsers. This can be 
frustrating. 

♦ Complexity: Although this layout technique is still far simpler than 
table-based layouts, it's still a bit involved. You do have to plan your 
divs to make this type of layout work. 

♦ Browser support: Layout is an area where little differences in browser 
implementations can lead to big headaches. Be prepared to use condi- 
tional comments to handle inconsistencies, like IE's strange margin and 
padding support. 
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Chapter 3: Styling Lists and Menus 

DropBooks — 

In This Chapter 

V Using CSS styles with lists 

W Building buttons from lists of links 

v* Dynamically displaying sublists 

v Managing vertical and horizontal lists 

W Building CSS-based menus 



ost pages consist of content and navigation tools. Almost all pages 
have a list of links somewhere on the page. Navigation menus are lists 
of links, but lists of links in plain HTML are ugly. There has to be a way to 
make 'em prettier. 

It's remarkably easy to build solid navigation tools with CSS alone (at least, 
in the modern browsers that support CSS properly). In this chapter, you 
rescue your lists from the boring 1990s sensibility, turning them into 
dynamic buttons, horizontal lists, and even dynamically cascading menus. 



ReVisitinq List Styles 

XHTML does provide some default list styling, but it's pretty dull. You'll 
often want to improve the appearance of a list of data. Most site navigation 
is essentially a list of links. One easy trick is to make your links appear as a 
set of buttons, as shown in Figure 3-1. 

The buttons in Figure 3-1 are pretty nice. They look like buttons, with the 
familiar three-dimensional look of buttons. They also act like buttons, with 
each button depressing when the mouse hovers over it. When you click one 
of these buttons, it acts like a link, taking you to another page. 
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Figure 3-1: 

These 
buttons are 
actually a 
list. Note 
that one 
button is 
depressed. 



n Lists 
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Defining navigation as a list of (inks 

If you look at the HTML, you'll be astonished at its simplicity: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /Ed" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>buttonList . html</ title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "buttonList.css" /> 

</head> 

<body> 

<hl>Button Lists</hl> 
<div id = "menu"> 
<ul> 

<lixa href = "http: //www. google . com">Google</ax/li> 
<lixa href = "http: //www. wiley. com">Wiley</ax/li> 
<lixa href = "http: //www. wikipedia .org">Wikipedia</ax/li> 
<lixa href = "http: //www. reddit . com">Reddit</ax/li> 
</ul> 
</div> 
</body> 
</html> 
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Turning links into buttons 

Asjfar as the XHTML code is concerned, it's simply a list of links. There's 



special here that makes this act like a group of buttons, except the 
of a div called menu. All the real work is done in CSS: 



#menu li { 

list-style-type: non 
width: 5em; 
text-align: center; 
margin-left: -2.5em; 

} 



tmenu a { 

text-decoration: none; 

color: black; 

display: block; 

border: 3px blue outset; 

background-color: #CCCCFF; 

} 

#menu a: hover { 

border: 3px blue inset; 

} 



The process for turning an ordinary list of links into a button group like this 
is simply an application of CSS tricks: 

Book III 

7. Begin with an ordinary list that will validate properly. Chapter 3 



It doesn't matter if you use an unordered or ordered list. Typically, the 
list will contain anchors to other pages. In this example, I'm using this 
list of links to some popular Web sites: 



■3- 



GO 
Ql 



<div id = "menu"> 2 
<ul> 

<lixa href = "http: //www. google. com">Google</ax/li> 

<lixa href = "http: //www. wiley.com">Wiley</ax/li> 

<lixa href = "http: //www. wikipedia . org">Wikipedia</ax/li> 

<lixa href = "http : //www. reddit . com">Reddit</ax/li> 
</ul> 
</div> 



2. Enclose the list in a named div. 

Typically, you'll still have ordinary links on a page. To indicate that these 
menu links should be handled differently, put them in a div named menu. 
All the CSS-style tricks described here refer to lists and anchors only 
when they're inside a menu div. 

3. Remove the bullets by setting the list-style-type to none. 

This will take away the bullets or numbers that usually appear in a list, 
as these features will distract from the effect you're aiming for (a group 
of buttons). Use CSS to specify how list items should be formatted when 
they appear in the context of the menu ID: 
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#menu li { 

list-style-type : none; 
width: 5em; 
text-align: center; 
margin-left: -2.5em; 




It. Specify the width of each button: 

width: 5em; 

A group of buttons looks best if they're all the same size. Use the CSS 
width attribute to set each li to 5 em. 

5. Remove the margin by using a negative margin- left value, as shown 
here: 

margin-left: -2 . 5em; 

Lists have a default indentation of about 2 . 5 em to make room for the 
bullets or numbers. Because this list won't have bullets, it doesn't need 
the indentations. Overwrite the default indenting behavior by setting 
margin-left to a negative value. 

6. Clean up the anchor by setting text-decoration to none and setting 
the anchor's color to something static, such as black text on light blue 
in this example: 

#menu a { 

text-decoration: none; 

color: black; 

display: block; 

border: 3px blue outset; 

background-color: #CCCCFF; 

} 



The button's appearance will make it clear that users can click it, so this 
is one place you can remove the underlining that normally goes with 
links. 

7. Give each button an outset border, as shown in the following: 

border: 3px blue outset; 

The outset makes it look like a 3D button sticking out from the page. 
This is best attached to the anchor, so you can swap the border when 
the mouse is hovering over the button. 

8. Set the anchor's display to block. 

This is a sneaky trick. Block display normally makes an element act like 
a block-level element inside its container. In the case of an anchor, the 
entire button becomes clickable, not just the text. This makes your page 
easier to use: 

display: block; 
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9. Swap for an inset border when the mouse hovers over an anchor by 
using the #menu a : hover selector to change the border to an inset: 



i : hover { 
border: 3px blue inset; 



When the mouse hovers over the button, it appears to be pressed down, 
enhancing the 3D effect. 

This list makes an ideal navigation menu, especially when placed inside one 
column of a multi-column floating layout. 



Building horizontal lists 

Sometimes, you want horizontal button bars. Because XHTML lists tend to 
be vertical, you might be tempted to think that a horizontal list is impossi- 
ble. In fact, CSS provides all you need to convert exactly the same XHTML to 
a horizontal list. Figure 3-2 shows such a page. 
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Figure 3-2: 

This list 
uses the 
same 

XHTML but 

different 

CSS. 
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There's no need to show the XHTML again because it hasn't changed at all 
(ain't CSS grand?). Even the CSS hasn't changed much: 

DropBocfeu _ 

tmenu li { 

list-style-type ; none; 
float: left; 
width: 5em; 
text-align: center; 

} 

#menu a { 

text-decoration : 
color: black; 
display: block; 
border: 3px blue 
background- color 

} 

#menu a: hover { 

border: 3px blue inset; 

} 

The modifications are incredibly simple: 
/. Float each list item by giving each li a float : left value: 

#menu li { 

list-style-type: none; 
float: left; 
width: 5 em; 
text-align: center; 

} 

2. Move the margin-left to the entire ul by taking the margin-left 
formatting from the li elements and transferring it to the ul: 

#menu ul { 

margin-left: -2 . 5em; 

3. Add a horizontal element. 

Now that the button bar is horizontal, it makes more sense to put in 
some type of horizontal page element. For example, you may want to use 
this type of element inside a heading div. 

Creating Dynamic Lists 

A simple list of buttons can look better than ordinary XHTML links, but 
sometimes, your page needs to have a more complex navigation scheme. For 
example, you may want to create a menu system to help the user see the 
structure of your site. 



outset; 
: #CCCCFF; 
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When you think of a complex hierarchical organization (which is how most 
multi-page Web sites end up), the easiest way to describe the structure is in 
ested lists. XHTML lists can contain other lists, and this can be a 
to organize data. 



Nested lists are a great way to organize a lot of information, but they can be 
complicated. You can use some special tricks to make parts of your list 
appear and disappear when needed. In the sections "Hiding the inner lists" 
and "Getting the inner lists to appear on cue," later in this chapter, you 
expand this technique to build a menu system for your pages. 



Building a nested list 

Begin by creating a system of nested lists without any CSS at all. Figure 3-3 
shows a page with a basic nested list. 

No CSS styling is in place yet, but the list has its own complexities: 

♦ The primary list has three entries. This is actually a multi-layer list. The 
top level indicates categories, not necessarily links. 

♦ Each element in the top list has its own sublist. A second layer of links 
has various links in most elements. 
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* Social networking 
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o reddit 

° stumbleupon 

♦ Reference 
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« Web development 
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■ htmlHeb 

■ CSS Zen Garden 
° Programming 

■ javascript com 

■ php.net 

■ invsql.com 



Figure 3-3: 

This nested 
list has no 
styles yet. 
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♦ The Web Development element has another layer of sublists. The gen- 
eral layout of this list entry corresponds to a complex hierarchy of infor- 
ation — like most complex Web sites. 



e list validates to the XHTML Strict standard. It's especially impor- 
tant to validate your code before adding CSS when it involves somewhat 
complex XHTML code, like the multi-level list. A small problem in the 
XHTML structure that may go unnoticed in a plain XHTML document 
can cause all kinds of strange problems in your CSS. 



Here is the code for the nested list in plain XHTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /KN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>nestedList . html</ title> 
</head> 



<body> 

<hl>Some of my favorite links</hl> 

<ul> 

<li>Social networking 

<ul> 

<lixa href = "http: //www. digg. com">dig</ax/li> 
<lixa href = "http: //www. reddit.com">reddit</ax/li> 
<lixa href = "http: //www. stumbleupon. com">stumbleupon</ax/li> 
</ul> 
</li> 

<li>Ref erence 

<ul> 

<lixa href = "http: //www. google. com">google</ax/li> 
<lixa href = "http: //wikipedia.org">wikipedia</ax/li> 
<lixa href = "http: //dictionary. com">dictionary</ax/li> 
</ul> 
</li> 

<li>Web development 

<ul> 

<li>XHTML/CSS 
<ul> 

<lixa href = "http : //www. w3schools . com">w3 schools</ax/li> 
<lixa href = "http: //htmlhelp.com">htmlHelp</ax/li> 
<lixa href = "http: //www. csszengarden.com">CSS Zen Garden</ax/li> 
</ul> 
</li> 

<li>Programming 
<ul> 

<lixa href = "http : //javascript . com"> javascript . com</ax/li> 
<lixa href = "http: //php.net">php.net</ax/li> 
<lixa href = "http : //www. mysql . com">mysql . com</ax/li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</body> 
</html> 
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jfitlG! Take special care with your indentation when making a complex nested list like 
this one. Without proper indentation, it becomes very difficult to establish the 
^■stlu/rtMae of the page. Also note that a list item can contain text and another 
vJ^rV^^ther arrangement (putting text between list items, for example) will 
cause a validation error and big headaches when you try to apply CSS. 

Hiding the inner lists 

The first step of creating a dynamic menu system is to hide any lists that are 
embedded in a list item. Add the following CSS style to your page: 

li ul { 

display: none; 

} 

In reality, you'll usually apply this technique only to a specially marked div, 
like a menu system. Don't worry about that for now. Later in this chapter, I 
show you how to combine this technique with a variation of the button tech- 
nique for complex menu systems. 

Your page will undergo a startling transformation, as shown in Figure 3-4. 
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Figure 3-4: 

Where did 
everything 
go? 
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That tiny little snippet of CSS code is a real powerhouse. It does some fasci- 
nating things, such as 



erating on unordered lists that appear inside list items: What this 
really means is the topmost list won't be affected, but any unordered list 
that appears inside a list item will have the style applied. 

♦ Using display: none to make text disappear: Setting the display 
attribute to none tells the XHTML page to hide the given data altogether. 

Note that this code works well on almost all browsers. It's pretty easy to 
make text disappear. Unfortunately, it's a little trickier to make all the 
browsers bring it back. 



Getting the inner lists to appear on cue 

The fun part is getting the interior lists to pop up when the mouse is over 
the parent element. A second CSS style can make this happen: 



li ul { 

display: none; 

} 

li: hover ul { 
display: block; 

} 



The new code is pretty interesting. When the page initially loads, it appears 
the same as what's shown in Figure 3-4, but when you hold the mouse over 
the Social Networking element, you see the effect shown in Figure 3-5. 



Figure 3-5: 

Holding the 
mouse over 
a list item 
causes its 
children to 
appear. 
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doesn't work on all browsers! Internet Explorer 6 (IE6) and earlier 
lon't support the : hover pseudo-class on any element except a. 
conditional comment with an alternative style for IE. 

m the list-reappearing code works: 

♦ All lists inside lists are hidden. The first style rule hides any list that's 
inside a list element. 

♦ li : hover refers to a list item that's being hovered over. That is, if the 
mouse is currently situated on top of a list item, this rule pertains to it. 

♦ li: hover ul refers to an unordered list inside a hovered list item. In 

other words, if some content is an unordered list that rests inside a list 
that currently has the mouse hovering over it, apply this rule. (Whew!) 

♦ Display the list as a block, display : block overrides the previous 
display: none instruction and displays the particular element as a 
block. The text reappears magically. 

This hide-and-seek trick isn't all that great on its own. It's actually quite 
annoying to have the contents pop up and go away like that. There's another 
more annoying problem. Look at Figure 3-6 to see what can go wrong. 
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Some of my favorite links 

♦ Social networking 

* Reference 











♦ Web development^ 
o XHTML CS5 

■ \v3 schools 

■ htmlHelp 

■ CSS Zen Garden 
o Programming 

■ javascript.com 

■ php.net 

■ mvsqlcom 



Figure 3-6: 

If the mouse 
hovers over 
Web 
Develop- 
ment, both 
submenus 
appear. 
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To see why this happens, take another look at the CSS code that causes the 
segment to reappear: 



pr ul { 
lay: block; 



This code means set display to block for any ul that's a child of a hovered li. 
The problem is that the Web Development li contains a ul that contains two 
more uls. All the lists under Web Development appear, not just the immediate 
child. 

One more modification of the CSS fixes this problem: 

li ul { 

display: none; 

} 

li: hover > ul { 
display: block; 

} 

The greater-than symbol (>) is a special selector tool. It indicates a direct 
relationship. In other words, the ul must be a direct child of the hovered li, 
not a grandchild or great-grandchild. With this indicator in place, the page 
acts correctly, as you can see from Figure 3-7. 



Figure 3-7: 

Now, only 
the next 
level of 
menu 
shows up 
on a mouse 
hover. 
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This trick allows you to create nested lists as deeply as you wish and to 
open any segment by hovering on its parent. 




t code has a list with three levels of nesting, but you can add as many 
nested lists as you want and use this code to make it act as a dynamic menu. 

Figure 3-8 illustrates how to open the next section of the list. 

I'm not suggesting that this type of menu is a good idea. Having stuff pop 
around like this is actually pretty distracting. With a little more formatting, 
you can use these ideas to make a functional menu system. I'm just starting 
here so you can see the hide-and-seek behavior in a simpler system before 
adding more details. 



Figure 3-8: 

You can 
create these 
lists as deep 
as you wish. 
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n combine the techniques of buttons and collapsing lists to build a 
system entirely with CSS. Figure 3-9 shows a page with a vertically 
arranged menu. 



When the user hovers over a part of the menu, the related sub-elements 
appear, as shown in Figure 3-10. 

This type of menu has a couple interesting advantages, such as 




4- It's written entirely with CSS. You don't need any other code or pro- 
gramming language. 

♦ The menus are simply nested lists. The XHTML is simply a set of nested 
lists. If the CSS turns off, the page is displayed as a set of nested lists, 
and the links still function normally. 

♦ The relationships between elements are illustrated. When you select 
an element, you can see its parent and sibling relationships easily. 

Nice as this type of menu system is, it isn't perfect. Because it relies on the 

li : hover trick, it doesn't work in versions of Internet Explorer (IE) prior to 7.0. 



Figure 3-9: 

Only the 
top-level 
elements 
are visible 
by default. 
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Figure 3-10: 

The user 
can select 
any part of 
the original 
nested list. 
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Building a Vertical menu With CSS 

The vertical menu system works with exactly the same HTML as the 
hiddenList example — only the CSS changed. Here's the new CSS file: 

/* horizMenu.css */ 

/* unindent entire list */ 

#menu ul { 

margin-left : -2 . 5em; 

} 

/* set li as buttons */ 
#menu li { 

list-style-type : none; 

border: Ipx black solid;; 

width: lOem; 

background-color : #cccccc; 
text-align: center; 

} 

/* display anchors as buttons */ 
tmenu a { 

color: black; 

text-decoration: none; 

display: block; 

} 

/* flash white on anchor hover */ 
#menu a: hover { 

background-color : white; 
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I/* collapse menus */ 
Wfe^li ul { 
yj^s^Lay : none; 



/* show submenus on hover */ 
#menu li:hover > ul { 

display: block; 

margin-left: -2em; 

} 



Of course, the CSS uses a few tricks, but there's really nothing new. It's just a 
combination of techniques you already know: 

/. Un-indent the entire list by setting the ul's margin- left to a nega- 
tive value to compensate for the typical indentation. 2 . 5 em is about 
the right amount. 

Because you'll be removing the list-style types, the normal indenta- 
tion of list items will become a problem. 

2. Format the li tags. 

Each li tag inside the menu structure should look something like a 
button. Use CSS to accomplish this task: 



/* set li as buttons */ 
#menu li { 

list-style-type: none; 

border: lpx black solid;; 

width: lOem; 

background-color: #cccccc; 
text-align: center; 



c. Center the text by setting text -align to center. 

d. Add a background color or image, or you'll get some strange 
border bleed-through later when the buttons overlap. 

3. Format the anchors as follows: 



/* display anchors as buttons */ 
#menu a { 

color: black; 

text-decoration: none; 

display: block; 



a. 



Set list-style-type to none. 



b. 



Set a border with the border attribute. 



a. Take out the underline with text-decoration: none. 
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b. Give the anchor a consistent color. 
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I 4. Give ! 



Set display to block (so the entire area will be clickable, not just 
e text). 



some indication it's an anchor by changing the background 
when the user hovers over the element: 

/* flash white on anchor hover */ 
#menu a : hover { 

background-color: white; 

} 



Because the anchors no longer look like anchors, you'll have to do 
something else to indicate there's something special about these ele- 
ments. When the user moves the mouse over any anchor tag in the menu 
div, that anchor's background color will switch to white. 

5. Collapse the menus using the hidden menus trick (discussed in the 
section "Hiding the inner lists," earlier in this chapter) to hide all the 
sublists: 

/* collapse menus */ 
#menu li ul { 
display: none; 

} 

6. Display the hidden menus when the mouse hovers over the parent ele- 
ment by adding the code described in the section "Getting the inner 
lists to appear on cue": 

/* show submenus on hover */ 
#menu li: hover > ul { 

display: block; 

margin-left: -2em; 

} 



This trick won't work on IE6 or earlier versions. You'll have to provide an 
alternate style sheet (with conditional commenting) or a JavaScript tech- 
nique for these earlier browsers. 



Building a horizontal menu 

You can make a variation of the menu structure that will work along the top 
of a page. Figure 3-11 shows how this might look. 

Notice that the submenus come straight down from their parent elements. I 
find a little bit of indentation helpful for deeply nested lists, as you can see in 
Figure 3-12. 

Once again, the HTML is identical. The CSS for a horizontal menu is surprisingly 
close to the vertical menu. The primary difference is floating the list items: 
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/* vertMenu.css */ 

/* unindent each unordered list */ 
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l { 

n-left: -2.5em; 



/* turn each list item into a solid gray block */ 
#menu li { 

list-style-type ; none; 

border: black solid lpx; 

float: left; 

width: lOem; 

background-color: #CCCCCC; 
text-align: center; 

} 



/* set anchors to act like buttons */ 
tmenu a { 

display: block; 

color: black; 

text-decoration : none ; 

} 

/* flash anchor white when hovered */ 
#menu a: hover { 

background-color : white; 

} 

/* collapse nested lists */ 
ttmenu li ul { 
display: none; 

) 



Figure 3-11: 

The same 
list is now a 
horizontal 
menu. 
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Figure 3-12: 

For the 
multi-level 
menus, a 
little bit of 
indentation 
is helpful. 
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/* display sublists on hover */ 
#menu li: hover > ul { 
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display: block; C/) 



/* indent third-generation lists */ <D 
#menu lilili{ e 53' 

margin-left: lem: w 

> S 
The CSS code has just a few variations from the vertical menu CSS: 



♦ Float each list item by adding float and width attributes. 

/* turn each list item into a solid gray block */ 
#menu li { 

list-style-type: none; 

border: black solid lpx; 

float: left; 

width: lOem; 

background-color: #CCCCCC; 
text-align: center; 



This causes the list items to appear next to each other in the same line. 
♦ Give each list item a width. In this case, 10 em seems about right. 
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♦ Indent a deeply nested list by having the first-order sublists appear 
directly below the parent. 



list nested deeper than its parent is hard to read. A little indentation 
lps a lot with clarity. 



♦ Use #menu li li li to indent nested list items, as shown here: 

/* indent third-generation lists */ 
#menu li li li{ 
margin-left: lem; 

} 



This selector is active on an element which has #menu and three list 
items in its family tree. It will work only on list items three levels deep. 
This special formatting isn't needed at the other levels but is helpful to 
offset the third-level list items. 



These tricks are just the beginning of what you can do with some creativity 
and the amazing power of CSS and HTML. You can adopt the simple exam- 
ples presented here to create your own marvels of navigation. 
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In This Chapter 

V Setting position to absolute 

Managing z- index 

Creating fixed and flexible layouts 
w Working with fixed and relative positioning 



floating layouts (described in Chapter 2 of this minibook) are the preferred 
way to set up page layouts today but some other alternatives are some- 
times useful. You can use absolute, relative, or fixed positioning techniques to 
put all your page elements exactly where you want them. Well, almost exactly. 
It's still Web development, where nothing's exact. 

Still, the techniques described in this chapter will give you even more capa- 
bilities when it comes to setting up great-looking Web sites. 



Working With Absolute Positioning 

Begin by considering the default layout mechanism. Figure 4-1 shows a page 
with two paragraphs on it. 

I used CSS to give each paragraph a different color (to aid in discussion 
later) and to set a specific height and width. The positioning is left to the 
default layout manager, which positions the second (black) paragraph 
directly below the first (blue) one. 
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Figure 4-1: 

These two 
paragraphs 
have a set 
height and 
width, but 
default 
positioning. 
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Setting up the HTML 

The code is unsurprising: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" 
"http://www. w3. org/TR/xhtmll/DTD/xhtmll-strict . dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www. w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>boxes .html</title> 
<style type = " text/ess "> 
#blueBox { 

background-color: blue; 

width: lOOpx; 

height: lOOpx; 

} 

#blackBox { 

background-color: black; 
width: lOOpx; 
height: lOOpx; 

} 

</style> 
</head> 



<body> 

<p id = "blueBox"x/p> 
<p id = "blackBox" ></p> 

</body> 
</html> 
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If you provide no further guidance, paragraphs (like other block-level elements) 
tend to provide carriage returns before and after themselves, stacking on top 
ther. Note that the default layout techniques ensure that nothing 
laps. 



Adding position guidelines 

Figure 4-2 shows something new: The paragraphs are overlapping! 



This feat is accomplished through some new CSS attributes: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" 
"http://www. w3. org/TR/xhtmll/DTD/xhtmll-strict. dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www. w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 

<title>absPosition.html</title> 

<style type = " text/ess "> 



#blueBox { 

background-color: blue; 
width: lOOpx; 
height: 10 Opx; 
position: absolute; 
left: Opx; 
top: Opx; 
margin : Opx ; 

} 
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Figure 4-2: 

Now the 
paragraphs 
overlap 
each other. 
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#blackBox { 

background-color: black; 
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width: 10 Opx; 
height: lOOpx; 
position: absolute; 
left: 50px; 
top: 5 Opx; 
margin: Opx; 



</style> 
</head> 

<body> 
<p id 
<p id 

</body> 
</html> 



"blueBox "></p> 
"blackBox "></p> 




So, why do I care if the boxes overlap? Well, you might not care, but the 
interesting part is this: You can have much more precise control over where 
elements live and what size they are. You can even override the browser's 
normal tendency to keep elements from overlapping, which gives you some 
interesting options. 



Making absolute positioninq Work 

A few new parts of CSS allow this more direct control of the size and position 
of these elements. Here's the CSS for one of the boxes: 

#blueBox { 

background-color: blue; 
width: lOOpx; 
height: lOOpx; 
position: absolute; 
left: Opx; 
top: Opx; 
margin : Opx ; 

} 

/. Set the position attribute to absolute. 

Absolute positioning can be used to determine exactly (more or less) 
where the element will be placed on the screen: 

position: absolute; 

2. Specify a left position in the CSS. 

After you determine that an element will have absolute position, it's 
removed from the normal flow, so you're obligated to fix its position. 
The left attribute determines where the left edge of the element will 
go. This can be specified with any of the measurement units, but it's typ- 
ically measured in pixels: 



left: Opx; 
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3. Specify a top position with CSS. 

The^top attribute indicates where the top of the element will go. Again, 
s usually specified in pixels: 



top: Opx; 

4. Use the height and width attributes to determine the size. 

Normally, when you specify a position, you'll also want to determine the 
size: 



width: lOOpx; 
height: lOOpx; 

5. Set the margins to 0. 

When you're using absolute positioning, you're exercising quite a bit of 
control. Because browsers don't treat margins identically, you're better 
off setting margins to 0 and controlling the spacing between elements 
manually: 

margin: Opx; 




Generally, you'll use absolute positioning only on named elements, rather 
than classes or general element types. For example, you won't want all the 
paragraphs on a page to have the same size and position, or you couldn't 
see them both. Absolute positioning works on only one element at a time. Book III 

Chapter 4 
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When you use absolute positioning, you can determine exactly where things » > 

are placed, so it's possible for them to overlap. By default, elements | 5 

described later in HTML are positioned on top of elements described earlier. £ g, 

This is why the black box appears over the top of the blue box in Figure 4-2. g' 



Handiinq depth 

You can use a special CSS attribute called z- index to change this default 
behavior. The z-axis refers to how close an element appears to be to the 
viewer. Figure 4-3 demonstrates how this works. 

The z- index attribute requires a numeric value. Higher numbers mean the 
element is closer to the user (or on top). Any value for z- index places the 
element higher than elements with the default z- index. This can be very 
useful when you have elements that you want to appear over the top of other 
elements (for example, menus that temporarily appear on top of other text). 
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Figure 4-3: 

The z-index 
allows you 
to change 
which 
elements 
appear 
closer to the 
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Here's the code illustrating the z-index effect: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" 
"http://www. w3. org/TR/xhtmll/DTD/xhtmll-strict . dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www. w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>z index. html</title> 
<style type = " text/ess "> 

#blueBox { 

background-color: blue; 
width: lOOpx; 
height: lOOpx; 
position: absolute; 
left: Opx; 
top: Opx; 
margin: Opx; 
z-index: 1; 

) 

tfblackBox { 

background-color: black; 
width: lOOpx; 
height: 10 Opx; 
position: absolute; 
left: 50px; 
top: 5 Opx; 
margin: Opx; 

} 

</style> 
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</head> 
<body> 
<p id 
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"blueBox "></p> 
"blackBox "></p> 
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The only change in this code is the addition of the z- index property. Here 
are a couple things to keep in mind when using z- index: 

♦ One element can totally conceal another. When you start positioning 
things absolutely, one element can seem to disappear because it's com- 
pletely covered by another. The z- index attribute is a good way to 
check for this situation. 

♦ Negative z- index is undefined. The value for z- index must be positive. 
A negative value is undefined and may cause your element to disappear. 

♦ It may be best to give all values a z- index. If you define the z- index 
for some elements and leave the z- index undefined for others, you have 
no guarantee exactly what will happen. If in doubt, just give every value 
its own z- index, and you'll know exactly what should overlap what. 

♦ Don't give two elements the same z- index. The point of the z- index 

is to clearly define which element should appear closer. Don't defeat this 
purpose by assigning the same z- index value to two different elements 
on the same page. 

Building a Page Layout With Absolute Positioning 

You can use absolute positioning to create a page layout. This process 
involves some trade-offs. You tend to get better control of your page with 
absolute positioning (compared to floating techniques), but absolute layout 
requires more planning and more attention to detail. Figure 4-4 shows a page 
layout created with absolute positioning techniques. 
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The technique for creating an absolutely positioned layout is similar to the 
floating technique (at least, in the general sense). 
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Figure 4-4: 

This layout 
was created 
with absolute 
positioning. 
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Lorem ipsum dolor sit 
amet, eonseetetuer 
adipiscing eiit Yivamus 
dui. Suspendisse 
potenti Lt dui quam, 
Clara Prima, lacinia ac, 
frtngitla et, justo. 
Martens Squirrelius 
erat, elementum quis, 
rhoncus nan, posuere 
nec, neque Jacobus et 
diam eu orci placerat 
interdum. Sed sapien. 
Yestibutuni iwerra 
dapibus odio. Xunc vd 
Benjamis. Yivamus 
porta ipsum at lectus 
In condimentum raetns 



Lorem ipsum dolor sit amet, eonseetetuer adipiscing eHt. Yivaimis dui. Suspendisse potenti. Ut dui quam, 
Clara Prima, lacinia ac. fringilla et, justo Matteus Squirrelius erat, elementum quis, rhoncus non. posuere 
nee, neque Jacobus et diam eu orci placerat interdum. Sed sapien Yestibulum ^erra dapibus odio. Xunc 
vel Benjamis Yivamus porta ipsum at lectus. In condimentum metus 

Lorem ipsum dolor sit amet, eonseetetuer adipiscing eKt Yivanms dui. Suspendisse potenti. L't dui quam, 
Clara Prima, lacinia ac, fringilla et, justo Matteus Squirrelius erat, elementum quis, rhoncus non, posuere 
nec, neque. Jacobus et diam eu orci placerat interdum Sed sapien Yestibulum \iverra dapibus odio Xunc 
Vd Benjamis Yivamus porta ipsum at lectus. In condimentum metus. 

Lorem ipsum dolor sit amet, eonseetetuer adipiscing eHt. Yivamus dui. Suspendisse potenti L't dui quam, 
Clara Prima, lacinia ac, fringilla et, justo Matteus Squirrelius erat, elementum quis, rhoncus non, posuere 
nec, neque. Jacobus et diam eu orci placerat interdum Sed sapien. Yestibuhun -vh'erra dapibus odio Xunc 
vel Benjamis. Yivamus porta ipsum at lectus. In condimentum metus. 
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0(/er(/ieu/ of absolute layout 

Before you begin putting your page together with absolute positioning, it's 
good to plan the entire process upfront. Here's an example of how the 
process should go: 

/. Plan the site. 

Having a drawing specifying how your site layout will look is really 
important. In absolute positioning, your planning is even more impor- 
tant than the floating designs because you'll need to specify the size and 
position of every element. 

2. Specify an overall size. 

This particular type of layout has a fixed size. Create an all div housing 
all the other elements and specify the size of this div (in a fixed unit for 
now, usually px or em). 

3. Create the XHTML. 

The XHTML page should have a named div for each part of the page (so 
if you have headers, columns, and footers, you need a div for each). 

It. Build a CSS page. 

The CSS page can be internal or linked, but because absolute positioning 
tends to require a little more markup than floating, external styles are 
preferred. 
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5. Identify each element. 

It'^easier to see what's going on if you assign a different colored border 
ch element. 



6. Make each element absolutely positioned. 

Set position : absolute in the CSS for each element in the layout. 

7. Specify the size of each element. 

Set the height and width of each element according to your diagram. 
(You did make a diagram, right?) 

8. Determine the position of each element. 

Use the left and top attributes to determine where each element goes 
in the layout. 

9. Tune up your layout. 

You'll probably want to adjust margins and borders. You may need to do 
some adjustments to make it all work. For example, the menu is 15 0px 
wide, but I added padding-left and padding-right of 5px each. 
This means the width of the menu needs to be adjusted to 140px to 
make everything still fit. 

Writing the XHTML 

The HTML code is pretty straightforward: 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" 



in 
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"http: //www. w3. org/TR/xhtmll/DTD/xhtmll-strict. dtd"> o in 

In 

<html lang="EN" dir="ltr" xmlns=" http: //www. w3 . org/1999/xhtml"> £ £ 

<head> o S 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 5' = 

<title>absLayout.html</title> <° s. 

<link rel = "stylesheet" 
type = "text/ess" 
href = "absLayout.css" /> 

</head> 

<body> 

<div id = "all"> 
<div id = "head"> 

<hl>Layout with Absolute Positioning</hl> 
</div> 

<div id = "menu"> 
</div> 

<div id = 11 content "> 
</div> 
</div> 
</body> 
</html> 
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Layout. ess */ 

#all { 

border: lpx solid black; 
width: 80 Opx; 
height: 600px; 
position: absolute; 
left: Opx; 
top: Opx; 

} 

#head { 

border: lpx solid green; 

position: absolute; 

width: 800px; 

height: lOOpx; 

top: Opx; 

left: Opx; 

text-align: center; 

} 

tmenu { 

border: lpx solid red; 
position: absolute; 
width: 140px; 
height: 500px; 
top: lOOpx; 
left: Opx; 
padding-left: 5px; 
padding-right: 5px; 

} 



#content{ 

border: lpx solid blue; 
position: absolute; 
width: 645px; 
height: 500px; 
top: lOOpx; 
left: 150px; 
padding-left: 5px; 



A static layout created with absolute positioning has a few important fea- 
tures to keep in mind: 




♦ You're committed to position everything. After you start using absolute 
positioning, you'll need to use it throughout your site. All the main page 
elements will require absolute positioning because the normal flow 
mechanism is no longer in place. 

You can still use floating layout inside an element with absolute position, 
but all your main elements (heading, columns, and footing) need to have 
absolute position if one of them does. 
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♦ You should specify size and position. With a floating layout, you're still 
encouraging a certain amount of fluidity Absolute positioning means 
e taking the responsibility for both the shape and size of each ele- 
in the layout. 



Absolute positioning is less adaptable. With this technique, you're 
pretty much bound to a specific screen width and height. You'll have 
trouble adapting to PDAs and cell phones. (A more flexible alternative is 
shown in the next section.) 

All the widths and the heights have to add up. When you determine the 
size of your display, all the heights, widths, margins, padding, and bor- 
ders have to add up, or you'll get some strange results. When you use 
absolute positioning, you're also likely to spend some quality time with 
your calculator, figuring out all the widths and the heights. 
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You can build a layout with absolute positioning and some flexibility. Figure 4-5 
illustrates such a design. 



The size of this layout is attached to the size of the browser screen. It attempts 
to adjust to the browser while it's resized. You can see this effect in Figure 4-6. 



Figure 4-5: 

This page 
uses ab- 
solute lay- 
out, but it 
doesn't 
have a 
fixed size. 
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Lorem ipsum dolor sit 
amet, consectetuer 
adipiseing elit Yivamus 
dui. Suspendisse potenti 
Ut dui quam, Clara Prima, 
lacinia ac, fhngilla et, justo. 
Matteus Squirrelius erat, 
elementum quis, rhoncus 
con, posuere nec, neque. 
Jacobus et diam eu orei 
placerat interdum. Sed 
sapieii. Yestibuhim viverra 
dapibus odio. Xunc vel 
Benjamis. Yivamus porta 
ipsum at lectus. In 



Lorem ipsuin dolor sit amet, consectetuer adipiseing elit. Yivamus dui. Suspendisse potenti. C t dui quam, Clara Prima, 
lacinia ac, tringifla et, justo Matteus Squirrelius erat, elementum quis. rhoncus non, posuere nec, neque Jacobus et 
diam eu orci placerat interdum. Sed sapien Yestibuhim viverra dapibus odio Xunc vel Benjamis Vivamus porta ipsum 
at lectus. In condimentum metus 

Lorem ipsum dolor sit amet. consectetuer adipiseing elit. Vivanms dui. Suspendisse potenti *<_ t dui quam, Clara Prima, 
lacinia ac, tringilla et, justo Matteus Squirrelius erat, elementum quis, rhoncus non. posuere nec, neque. Jacobus et 
diam eu orci placerat interdum Sed sapien Yestibuhmi vrverra dapibus odio Nunc vel Benjamis Ytvaoius porta ipsum 
at lectus. In condimentum metus 

Lorem ipsum dolor sit amet, consectetuei" adipi; :uii cii: ivamus dui ■Mispeudisse potenti. L t dui quam. Clara Prima, 
lacinia ac, tringilla et, justo Matteus Squirrelius erat, elementum quis, rhoncus non, posuere nec, neque. Jacobus et 
diam eu orci placerat interdum. Sed sapien Yestibuhim. vrverra dapibus odio Xunc vel Benjamis Yivamus porta ipsum 
at lectus In condimentum metus 
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Figure 4-6: 

The layout 
resizes in 
proportion 
to the 
browser 
window. 
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tail ( 

fcirder : lp< fclack solid; 
position: absolute; 
left: 5*; 

width: 90*; 
height: 90*; 

) 

♦head [ 
border: Ipx black solid; 
position: absolute; 



left 



Of; 



width: 100*; 
height: 10*; 



height: 90t; 
padding-left; 11; 
F adding- right : 1* ; 
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Lorem ipsum 
dolor sit amet, 
consectetuer 
adipiscins elit 
Vh anms dui. 
Suspendisse 
potenti. Ut dui 
quam. Clara 
Prima, lacinia 
ac, fringilla et, 
justo Matteus 
Squirrelius erat, 
elementum quis, 
rhoncus non, 
posuere nee. 
neque. Jacobus 
et diani eu orci 
placer at 
inter dum. Sed 

Yestibuhmi 
Won dapibus 
odio Nunc vd 
Benjamis. 



Lorem ipsum dolor sit amet, consectetuer adipiscing elit Vh'amus dui 
Suspendisse potenti Ut dui quam, Clara Prima, lacinia ac, fringilla et, 
justo. Matteus Squirrelius erat, elementum quis, rhoncus non, posuere 
ne,\ neque ."acobu; et diam eu crd placerat inter duin Sed sapien 
\ esnbuhmi vrverra dapibus odio Nunc vel Benjamis. \ ivamus porta 
ipsum at lectus. In conditnentum merus. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Yivamus dui. 
Snspeadhsc potenti. L t dui quam. Clara Prima, lacinia ac : fringilla et, 
justo. Matteus S quire lm_= erat. elementum quis. rhoncus non, posuere 
nec, neque. Jacobus et diam eu orci placerat interdum. Sed sapien. 
Yestibulum Awerra dapibus odio Xunc vd Benjamis Yivamus porta 
ipsum at lectus In condimentummetus. 

Lorem ipsum dolor sit amet, consectetuer adipiscins elit Vrvarnus dui. 
Suspendisse potenti. L't dui quam, Clara Prima, lacinia ac, fringilla et, 
justo Matteus Squirrelius erat, elementum quis, rhoncus non, posuere 
nec, neque Jacobus et diam eu orci placerat interdum Sed sapien. 
Yestibulum \fverra dapibus odio Xunc vel Benjamis. Yivamus porta 
ipsum at lectus In condimentum metus. 
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The page simply takes up a fixed percentage of the browser screen. The pro- 
portions are all maintained, no matter what the screen size is. 




Having the page resize with the browser works, but it's not a complete solution. 
When the browser window is small enough, the text will no longer fit without 
some ugly bleed-over effects. 



besiqninq With percentages 

This absolute but flexible trick is achieved by using percentage measure- 
ments. The position is still set to absolute, but rather than defining size 
and position with pixels, use percentages instead. Here's the CSS: 

/* absPercent . ess */ 
#all { 

border: Ipx black solid; 
position: absolute; 
left: 5%; 
top: 5%; 
width: 90%; 
height: 90%; 

} 

#head { 

border: Ipx black solid; 
position: absolute; 
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left: 0%; 
top: 0%; 
idth: 100%; 

10%; 

gn: center; 



#head hi { 

margin-top: 1%; 

} 

(menu { 

border: lpx green solid; 
position: absolute; 
left: 0%; 
top: 10%; 
width: 18%; 
height: 90%; 
padding-left: 1%; 
padding-right : 1% ; 

#content { 

border: lpx black solid; 
position: absolute; 
left: 20%; 
top: 10%; 
width: 78%; 
height: 90%; 
padding-left: 1%; 

padding-right: 1%; BOOK III 

} Chapter 4 



} 



The key to any absolute positioning (even this flexible kind) is math. When 
you just look at the code, it isn't clear where all those numbers come from. 
Look at the diagram for the page in Figure 4-7 to see where all these numbers 
come from. 
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Building the layout 

Here's how the layout works: 

7. Create an all container by building a div with the all ID. 

The all container will hold all the contents of the page. It isn't absolutely 
necessary in this type of layout, but it does allow for a centering effect. 

2. Specify the size and position of all. 

I want the content of the page to be centered in the browser window, so I 
set its height and width to 90 percent, and its margin-left and 
margin-top to 5 percent. This in effect sets the margin-right and 
margin-bottom also to 5 percent. These percentages refer to the all 
div's container element, which is the body, with the same size as the 
browser window. 
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All 

left: 5% 
top: 5% 

width: 90% 
height: 90% 



Header - 1: 0% t: 0% w: 100% h: 10% centered 




width: 18% 
height: 100% 

pad -1:1% 
pad - r: 1% 



All 

left, 

top 

5% 



Content 

left: 20% 
top: 10% 

width: 78% 
height: 90% 

padding - left: 1% 
padding - right: 1% 



Figure 4-7: 

The diagram 
is the key to 
a successful 
layout. 



3. Other percentages are in relationship to the all container. 

Because all the other elements are placed inside all, the percentage 
values are no longer referring to the entire browser window. The widths 
and heights for the menu and content areas are calculated as percent- 
ages of their container, which is all. 

It. Determine the heights. 

Height is usually pretty straightforward because you don't usually have 
to change the margins. Remember, though, that the head accounts for 10 
percent of the page space, so the height of both the menu and content 
needs to be 90 percent. 

5. Figure the general widths. 

In principle, the width of the menu column is 20 percent, and the con- 
tent column is 80 percent. This isn't entirely accurate, though. . . . 
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6. Compensate for margins. 

|""N I You'll probably want some margins, or the text looks cramped. If you 

1 | [j [j IJ fj l^vCfl l percent margin-left and 1 percent margin-right on the 

f~ nMi column, you have to set the menu's width to 18 percent to com- 

pensate for the margins. Likewise, set the content width to 78 percent to 
compensate for margins. 




As if this weren't complex enough, remember that Internet Explorer 6 (IE6) 
and earlier browsers calculate margins differently! In these browsers, the 
margin happens inside the content, so you don't have to compensate for 
them (but you have to remember that they make the useable content area 



smaller). You'll probably have to make a conditional comment style sheet to 
handle IE6 if you use absolute positioning. 



Exploring Other Types of Positioning 

If you'll use the position attribute, you're most likely to use absolute. 
However, here are other positioning techniques that can be handy in certain 
circumstances: 



Relative: Set position : relative when you want to move an ele- 
ment from its default position. For example, if you set position to rela- 
tive and top: -10px, the element would be placed 10 pixels higher on 
the screen than normal. 

Fixed: Use fixed position when you want an element to stay in the same 
place, even when the page is scrolled. This is sometimes used to keep a 
menu on the screen when the contents are longer than the screen width. 
If you use fixed positioning, be sure you're not overwriting something 
already on the screen. 
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The real trick is to use appropriate combinations of positioning schemes to 
solve interesting problems. 



Creating a fixed menu system 

Figure 4-8 illustrates a very common type of Web page — one with a menu on 
the left and a number of stories or topics in the main area. 

Something is interesting about this particular design. The button list on the 
left refers to specific segments of the page. When you click one of these but- 
tons (say, the Gamma button), the appropriate part of the page is called up, 
as shown in Figure 4-9. 
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Figure 4-8: 

At first 
glance, this 
is yet 
another 
two-column 
layout. 



Fixed Position 



Menu 



.Alpha 



Alpha 



Lorem ipsurn dolor sit amet, consectetuer adipiscing elit Vivamus dui Suspendisse potenti. Ut dui quarn, Clara Prima, lacinia ac, 
rrineilla et. justo Matteus Squirrehis erat. elementum quis. rhoncus non. posuere nec. neque Jacobus et cHam eu orci placerat 
interduni Sed sapien Vestibufum viverra dapibus odio Nunc vel Benjamis Yivamus porta ipsum at lectus In condimentum metus 

Lorem ipsum dolor sit amet consectetuer adipiscine elit \"h amus dui Suspendisse potenti Ut dui quam. Clara Prima, lacinia ac, 
tringula et, justo Matteus Squtrrelrus erat, elementum quis. rhoncus non, posuere nec, neque Jacobus et diam eu orci placerat 
interduni Sed sapien Yestibulmn \iverra dapibus odio Nunc vel Benjamis Yivamus porta ipsum at lectus In condimentum metus 



Beta 

Lorem ipsum dolor sit amet, consectetuer adipiscing eHt Yivamus dui Suspendisse potenti Ut dui quam, Clara Prima, lacinia ac, 
fhngilla et, justo. Matteus Squirrelius erat, elementum quis, rhoncus non, posuere nec, neque. Jacobus et diam eu orci placerat 
interduni Sed sapien. Yestibuiurn viverra dapibus odio. Nunc vel Benjamis. Yivamus porta ipsum at lectus In condimentum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscing eHt. Yivamus dui Suspendisse potenti L't dui quam, Clara Prima, lacirria ac, 
fhngilla et, justo Matteus Squirrelius erat, elementum quis, rhoncus non, posuere nec, neque Jacobus et diam eu orci placerat 
interduni Sed sapien. Yestibulum viverra dapibus odio Nunc vel Benjamis Yivamus porta ipsum at lectus In condimentum metus 

Gamma 



Lorem ipsum dolor sit amet, consectetuer acHpiscing elit Yivamus dui Suspendisse potenti L"t dui quam, Clara Prima, lacinia ac, 
friuailla et. justo Matteus Squirrelius erat. elementum quis. rhoncus non, posuere nec, neque. Jacobus et diam eu orci placerat 
interduni Sed sapien Yestibulum viverra dapibus odio Nunc vel Benjamis. Yivamus porta ipsum at lectus In condimentum metus 



Figure 4-9: 

The page 
scrolls to 
the Gamma 
content, but 
the menu 
stays put! 
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Menu 



Beta 



Lorem ipsum dolor sit amet, consectetuer adipiscing eHt. Yivamus dui Suspendisse potenti L't dui quam, Clara Prima, lacirria ac, 
fringiila et, justo Matteus Squirrelius erat. elementum quis, rhoncus non, posuere nec, neque. Jacobus et diam eu orci placerat 
interduni. Sed sapien Yestibulum viverra dapibus odio Nunc vel Benjamis Yivamus porta ipsum at lectus In condimentuni metus. 

Lorem ipsum dolor sit amet, consectetuer sdipiscmg elit. \ ivamus dui. Suspend:;;; potenti. •_ t dui quam, Clara Prima, lacinia ac, 
fringiila et, justo Matteus SquirreHus erat, elementum quis. rhoncus non, posuere nec, neque. Jacobus et diam eu orci placerat 
interduni Sed sapien. Yestibulum viverra dapibus odio. Nunc vel Benjamis. Yivamus porta ipsum at lectus In condimentum meats 

Gamma 

Lorem ipsum dolor sit amet, consectetuer acHpiscing eHt \ 'ivamus dui. Suspendisse potenti L't dui quam, Clara Prima. lacirria ac, 
fringflla et, justo Matteus SquirreHus erat, elementum quis, rhoncus non, posuere nec, neque Jacobus et cHam eu orci placerat 
interduni Sed sapien Yestibulum wan dapibus odio Nunc vel Benjamis Yivamus porta ipsuni at lectus In condimentum metus 

Lorem ipsum dolor sit amet, consectetuer adipiscing eHt Yivamus dui Suspendisse potenti L't dui quam, Clara Prima, lacirria ac, 
fringiila et, justo. Matteus SquirreHus erat, elementum quis, rhoncus non, posuere nec, neque. Jacobus et diam eu orci placerat 
interduni Sed sapien Yestibulum viverra dapibus odio Nunc vel Benjamis Vh 'amus porta ipsum at lectus In condimentuni metus 

Delta 

Lorem ipsum dolor sit amet, consectetuer acHpiscing eHt Yivamus dui Suspendisse potenti. L't dui quam, Clara Prima, lacirria ac, 
fringiila et, justo. Matteus SquirreHus erat, elementum quis, rhoncus non, posuere nec, neque Jacobus et diam eu orci placerat 
interduni. Sed sapien Yestibulum viverra dapibus odio Nunc vel Benjamis. Yivarnus porta ipsum at lectus In condimentum metus 

Lorem ipsum dolor sit amet, consectetuer acHpiscing eHt. Yivamus dui Suspendisse potenti. L't diri quam, Clara Prima, lacirria ac, 
Singula et, justo Matteus SquirreHus erat, elementum quis, rhoncus non, posuere nec, neque. Jacobus et diam eu orci placerat 
interduni Sed sapien Yestibulum man dapibus odio Nunc vel Benjamis Yivamus porta ipsum at lectus. In condimentuni metus. 
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Normally, when you scroll down the page, things on the top of the page (like the 
menu) disappear. In this case, the menu stays on the screen, even though 
^^l^a^of the page where it was originally placed is now off the screen. 

Gamma isn't necessarily moved to the top of the page. Linking to an element 
ensures that it's visible but doesn't guarantee where it will appear. 

You can achieve this effect using a combination of positioning techniques. 



Setting up the XHTML 

The HTML for the fixed menu page is simple (as you'd expect by now): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" 
"http://www. w3. org/TR/xhtmll/DTD/xhtmll-strict. dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www. w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 
<title>f ixedRelative .html</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = 11 f ixedRelative . ess " /> 

</head> 



<body> 

<hl>Fixed Position</hl> 
<div id = "menu"> 

<ul> 

<lixa href 

<lixa href 

<lixa href 

<lixa href 
</ul> 
</div> 



" #alpha " >Alpha< /ax/ li> 
"#beta">Beta</ax/li> 
" #gamma " >Gamma< / ax/li> 
"#delta">Delta</ax/li> 
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<div class = "content" 
id = " alpha "> 
<h2>Alpha</h2> 
</div> 



<div class = "content" 
id = "beta"> 
<h2>Beta</h2> 
</div> 



<div class = "content" 
id = 11 gamma "> 
<h2>Gamma</h2> 
</div> 



<div class = "content" 
id = "delta"> 
<h2>Delta</h2> 
</div> 



</body> 
</html> 
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The XHTML has only a few noteworthy characteristics: 
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has a menu. The div named menu contains a list of links (like most 
enus). 




♦ The menu has internal links. A menu can contain links to external docu- 
ments or (like this one) links inside the current document. The <a href 
= " #alpha" >Alpha</a> code means create a link to the element in 
this page with the ID alpha. 

♦ The page has a series of content divs. Most of the page's content 
appears in one of the several divs with the content class. This class 
indicates all these divs will share some formatting. 

♦ The content divs have separate IDs. Although all the content divs 
are part of the same class, each has its own ID. This allows the menu to 
select individual items (and would also allow individual styling, if desired). 

As normal for this type of code, I left out the filler paragraphs from the code 
listing. 

Setting the CSS Values 

The interesting work happens in CSS. Here's an overview of the code: 

/* fixedRelative.css */ 
body { 

background-color: #fff9bf; 

} 

hi { 

text-align: center; 

} 

tmenu { 

position: fixed; 
width: 18%; 

} 

tmenu li { 

list-style-type: none; 
margin-left: -2em; 
text-align: center; 

} 

tmenu a{ 

display: block; 
border: 2px gray outset; 
text-decoration: none; 
color: black; 

} 



#menu a: hover { 
color: white; 
background-color: black; 
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border: 2px gray inset; 

} 




content { 

position: relative; 
left: 2 0%; 
width: 80%; 



. content h2 { 
border-top: 3px black double; 

} 

Most of the CSS is familiar if you've looked over the other chapters in this 
minibook. I changed the menu list to make it look like a set of buttons, and I 
added some basic formatting to the headings and borders. The interesting 
thing here is how I positioned various elements. 



Here's how you build a fixed menu: 

/. Set the menu position to fixed by setting the position attribute to 
fixed. 

The menu div should stay on the same spot, even while the rest of the Book 111 

page scrolls. Fixed positioning causes the menu to stay put, no matter Chapter 4 

what else happens on the page. 

c 

2. Give the menu a width with the width attribute. ^ ~ 

o cn 

It's important that the width of the menu be predictable, both for aes- > 
thetic reasons and to make sure the content isn't overwritten by the § 2} 

menu. In this example, I set the menu width to 18 percent of the page £ g, 

width (20 percent minus some margin space). g 

3. Consider the menu position by explicitly setting the top and left 
attributes. 

When you specify a fixed position, you can determine where the element 
is placed on the screen with the left and top attributes. I felt that the 
default position was fine, so I didn't change it. 

It. Set content position to relative. 

By default, all members of the content class will fill out the entire page 
width. Because the menu needs the leftmost 20 percent of the page, set 
the content class' position to relative. 
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5. Change content's left attribute to 20 percent. 

Because content has relative positioning, setting the left to 20 per- 
^rent will add 20 percent of the parent element to each content's left 
^ralue. This will ensure that there's room for the menu to the left of all 
the content panes. 

6. Give content a width property. 

If you don't define the width, content panels may bleed off the right 
side of the page. Use the width property to ensure this doesn't happen. 
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determining l/our Layout Scheme 

All these layout options might just make your head spin. What's the right 
strategy? Well, that depends. 

The most important thing is that you find a technique you're comfortable 
with that gives you all the flexibility you need. 

Absolute positioning seems very attractive at first because it promises so 
much control. The truth is, it's pretty complicated to pull off well, it isn't 
quite as flexible as the floating layout techniques, and it's hard to make work 
right in the older browsers. 

Floating layouts are generally your best bet, but it's good to know how 
absolute positioning works. Every once in a while, you'll find a situation 
where absolute positioning is a good idea. You'll see another example of 
absolute positioning in Chapter 7 of Book IV when you animate the position 
of an element on the screen. 

Sometimes, fixed and relative positioning schemes are handy, as in the exam- 
ple introduced in the preceding section. 

Sometimes, you'll find it's best to combine schemes. (It's difficult to combine 
absolute positioning with another scheme, but you can safely combine float- 
ing, fixed, and relative positioning techniques most of the time.) 

There really aren't any set answers. CSS layout is still an art in progress, and 
there's plenty to find out about that I can't describe in this book. Keep prac- 
ticing and keep exploring, and you'll be building beautiful and functional lay- 
outs in no time. 
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JavaScript code adds interactivity for checking input and even 
making games and animations. 
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In This Chapter 

if Adding JavaScript code to your pages 

if Setting up your environment for JavaScript 

if Creating variables 

if Inputting and outputting with modal dialogs 

if Using Concatenation to build text data 

if Understanding data types 

if Using string methods and properties 

if Using conversion functions 



pages are defined by the XHTML code and fleshed out by CSS. But 
ww to make them move and breathe, sing, and dance, you need to add a 
programming language or two. If you thought building Web pages was cool, 
you're going to love what you can do once you do a little programming. 
Programming is what makes pages interact with the user. Interactivity is the 
"new" in "new media" (if you ask me, anyway). Learn to program, and your 
pages come alive. 

Sometimes people are nervous about programming. It seems difficult 
and mysterious, and only super-geeks do it. That's a bunch of nonsense. 
Programming is no more difficult than XHTML and CSS. It's a natural extension, 
and you're going to like it. 

In this chapter, you discover how to add code to your Web pages. You use a 
language called JavaScript, which is already built into most Web browsers. 
You don't need to buy any special software, compilers, or special tools, 
because you build JavaScript just like XHTML and CSS — in an ordinary text 
editor or a specialty editor like Aptana. 



Working in JavaScript 

JavaScript is a programming language first developed by Netscape 
Communications. It is now standard on nearly every browser. You should 
know a few things about JavaScript right away: 
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♦ It's a real programming language. Don't let anybody tell you otherwise. 
Sure, JavaScript doesn't have all the same features as a monster like C++ 
VB.NET, but it's still got all the hallmarks of a complete programming 
guage. 




♦ It's not Java. Sun Microsystems developed a language called Java, which 
is also sometimes used in Web programming. Despite the similar names, 
Java and JavaScript are completely different languages. The original plan 
was for JavaScript to be a simpler language for controlling more com- 
plex Java applets, but that never really panned out. 

Don't go telling people you're programming in Java. Java people love to 
act all superior and condescending when JavaScript programmers make 
this mistake. 

4- It's a scripting language. As programming languages go, JavaScript's 
pretty friendly. It's not quite as strict or wordy as some other languages. 
It also doesn't require any special steps (like compilation), so it's pretty 
easy to use. These things make JavaScript a great first language. 



Choosing a JavaScript editor 

Even though JavaScript is a programming language, it is still basically text. 
Because it's normally embedded in a Web page, you can work in the same 
text editor you're using for XHTML and CSS. If you aren't already, I recom- 
mend that you use the powerful Aptana editor. Aptana is great for XHTML 
and CSS, but it really comes into its own when you use it to incorporate 
JavaScript code in your pages. 

JavaScript is an entirely different language and syntax than HTML and CSS. It 
isn't hard to learn, but there's a lot to learning any programming language. 
Aptana has a number of great features that help you tremendously when 
writing JavaScript code: 

♦ Syntax highlighting: Just like HTML and CSS, Aptana automatically 
adjusts code colors to help you see what's going on in your program. As 
you see in the sidebar "Concatenation and your editor" in this chapter, 
this adjustment can be a big benefit when things get complicated. 

♦ Code completion: When you type the name of an object, Aptana provides 
you with a list of possible completions. This shortcut can be really helpful 
because you don't have to memorize all the details of the various functions 
and commands. 

♦ Help files: The Start page (available from the File menu if you've 
dismissed it) has links to great help pages for HTML, CSS, and 
JavaScript. The documentation is actually easier to read than some of 
what you'll find on the Web. 
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♦ Integrated help: Hover the mouse over a JavaScript command or method, 
and a nifty little text box pops up to explain exactly how the feature works. 
, it even includes an example or two. 



r warnings: When Aptana can tell something is going wrong, it gives 
you an error message and places a red squiggly (such as the one 
spellcheckers use) under the suspect code. 

I'm unaware of a better JavaScript editor at any price, and Aptana is free, so 
there's just not a good reason to use anything else. Of course, you can use any 
text editor if you don't want or need those features. Any of the following text 
editors (all mentioned in Book 1, Chapter 3) are suitable for JavaScript work: 

♦ Notepad++ 

♦ VI /VIM 

♦ Emacs 

♦ Scintilla 

♦ jEdit 



There's one strange characteristic I've noticed in Aptana. The Preview tab 
isn't as reliable a technique for checking JavaScript code as it was in XHTML 
and CSS. I find it better to run the code directly in my browser or use the 
Run button to have Aptana run it in the external browser for me. 



Picking your test browser 

In addition to your editor, you should think again about your browser when 
you're testing JavaScript code. All the major browsers support JavaScript, 
and the support for JavaScript is relatively similar across the browsers (at 
least for the stuff in this chapter). However, browsers aren't equal when it 
comes to testing your code. 

Things will go wrong when you write JavaScript code, and the browser is 
responsible for telling you what went wrong. Firefox is way ahead of Internet 
Explorer when it comes to reporting errors. Firefox errors are much easier to 
read and understand, and Firefox supports a thing called the javascript console 
(described in Chapter 3 of this minibook that makes it much easier to see 
what's going on. If at all possible, use Firefox to test your code and then check 
for discrepancies in Internet Explorer. 

You can discover more about finding and fixing errors in Chapter 3 of this 
minibook. 
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Hello World? 



reT'a loTlgTradition in programming lan- 
guages that your first program in any language 
should simply say, "Hello, World!" and do noth- 
ing else. There's actually a very good practical 
reason forthis habit. Hello World is the simplest 
possible program you can write that you can 
prove works. Hello World programs are used to 



help you figure out the mechanics of the pro- 
gramming environment — how the program is 
written, what special steps you have to do to 
make the code run, and how it works. There's no 
point in making a more complicated program 
until you know you can get code to pop up and 
say hi. 



Writing \lour First JavaScript Program 

The foundation of any JavaScript program is a standard Web page like the 
ones featured in the first three minibooks. 

To create your first JavaScript program, the first thing you need to do is add 
JavaScript code to your pages. Figure 1-1 shows the classic first program in 
any language. 



Figure 1-1: 

A Java- 
Script 
program 
caused this 
little dialog 
box to pop 
up! 
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This page has a very simple JavaScript program in it that pops up the phrase 
"Hello, World!" in a special element called a dialog box. It's pretty cool. 



overview of the code: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>HelloWorld.html</title> 
<script type = "text/javascript"> 
//< ! [CDATA [ 

// Hello, world! 
alert ( "Hello, World!"); 
//] ]> 
</script> 
</head> 

<body> 

</body> 
</html> 



As you can see, this page contains nothing in the HTML body. You can incor- 
porate JavaScript with XHTML content. For now, though, you can simply 
place JavaScript code in the head area in a special tag and make it work. 



Embedding your JavaScript code 

JavaScript code is placed in your Web page via the <script> tag. JavaScript 
code is placed inside the <script></script> pair. The <script> tag has 
one required attribute, type, which will usually be text/ javascript. 
(Other types are possible, but they're rarely used.) 

The other funny thing in this page is that crazy CDATA stuff. Immediately 
inside the script tag, the next line is: 



//<! [CDATA [ 

Book IV 
Chapter 1 

This bizarre line is a special marker explaining that the following code is 

character information and shouldn't be interpreted as XHTML. The end of 

the script finishes off the character data marker with this code: i. g 

=r 3 

//] ]> a in 

a V) 
V) ST 

In modern browsers, it's a good idea to mark off your JavaScript code as 5 ji 

character data. If you don't, the XHTML validator will sometimes get con- "5 °- 

fused and claim you have errors when you don't. 



That CDATA business is bizarre. It's hard to memorize, I know, but just type it 
a few times, and you'll own it. 
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A lot of older books and Web sites don't recommend the character data 
trick, but it's well worth learning. You've invested too much effort into build- 
ndards-compliant pages to have undeserved error messages pop up 
e the browser thinks your JavaScript is badly formatted XHTML. 





Creating comments 

Just like XHTML and CSS, comments are important. Because programming 
code can be more difficult to decipher than XHTML or CSS, it's even more 
important to comment your code in JavaScript than it is in these environ- 
ments. The comment character in JavaScript is two slashes (//).The browser 
ignores everything from the two slashes to the end of the line. You can also 
use a multi-line comment (J* */) just like the one in CSS. 

Using the alert ( ) method for output 

You can output data in JavaScript in a number of ways. In this introductory 
chapter, I focus on the simplest to implement and understand — the alert ( ) . 

This technique pops up a small dialog box containing text for the user to read. 
The alert box is an example of a modal dialog. Modal dialogs interrupt the flow 
of the program until the user pays attention to them. Nothing else will happen 
in the program until the user acknowledges the dialog by clicking the OK 
button. The user can't interact with the page until he clicks the button. 

Modal dialogs may seem a bit rude. In fact, you probably won't use them 
much once you discover other input and output techniques. The fact that 
the dialog box demands attention makes it a very easy tool to use when you 
start programming. I use it (and one of its cousins) throughout this chapter 
because it's easy to understand and use. 

Adding the semicolon 

Each command in JavaScript ends with a semicolon (;) character. The semi- 
colon in most computer languages acts like the period in English. It indicates 
the end of a logical thought. Usually, each line of code is also one line in the 
editor. 

To tell the truth, JavaScript will usually work fine if you leave out the semi- 
colons. However, you should add them anyway because they help clarify your 
meaning. Besides, most other languages, including PHP (see Book V), requires 
semicolons. You may as well start a good habit now. 
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r programs get their power by working with information. Figure 1-2 
rogram that gets user data from the user to include in a customized 

greeting. 



Figure 1-2: 

First, the 
program 
asks the 
user for her 
name. 



[JavaScript Application] 



What is your name? 

Elizabethl 



This program introduces a new kind of dialog that allows the user to enter 
some data. The information is stored in the program for later use. After the 
user enters her name, she gets a greeting, as shown in Figure 1-3. 



Figure 1-3: 

The start of 
the greeting. 
Press the 
button for 
the rest. 




The rest of the greeting happens on a second alert dialog, shown in Figure 1.4. 
It incorporates the username supplied in the first dialog box. 



Figure 1-4: 

Now the 
greeting is 
complete. 



[JavaScript Application] 

Elizabeth 



1 



The output may not seem that incredible, but take a look at the source code 
to see what's happening: 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 

L <IJ gta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>prompt .html</title> 
<script type = " text/ javascript "> 
//<! [CDATA [ 

var person = " " ; 

person = prompt ( "What is your name?"); 
alert ("Hi") ; 
alert (person) ; 

//] ]> 
</script> 
</head> 

<body> 

</body> 
</html> 

Creating a Variable (or data storage 

This program is interesting because it allows user interaction. The user can 
enter a name, which is stored in the computer and then returned in a greet- 
ing. The key to this program is a special element called a variable. Variables 
are simply places in memory for holding data. Any time you want a computer 
program to "remember" something, you can create a variable and store your 
information in it. 

Variables typically have the following characteristics: 

♦ The var statement: You can indicate that you're creating a variable with 
the var command. 

♦ A name: When you create a variable, you're required to give it a name. 

♦ An initial value: It's useful to give each variable a value immediately. 

♦ A data type: JavaScript automatically determines the type of data in a 
variable (more on this in the section called "Understanding Variable 
Types"), but you should still be clear in your mind what type of data you 
expect a variable to contain. 

Asking the user for information 

The prompt statement does several interesting things: 

♦ Pops up a dialog box. It creates a modal dialog much like the alert ( ) 
method does. 

♦ Asks a question. The prompt ( ) command expects you to ask the user a 
question. 
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Provides space for a response. The dialog box contains a space for the 
user to type a response, as well as buttons for the user to click when 
finished or wants to cancel the operation. 



'es the information to a variable. The purpose of a prompt is to get 

data from the user, so prompts are nearly always connected to a variable. 
When the code is finished, the variable contains the indicated value. 



Responding to the user 

This program uses the alert ( ) statement to begin a greeting to the user. The 
first alert works just like the one from the helloWorld program, described 
earlier in this chapter in the section "Writing Your First JavaScript Program": 



alert ("Hi") ; 



The content of the parentheses is the text you want the user to see. In this 
case, you want the user to see the literal value " Hi " . 



The second alert statement is a little bit different: 



alert (person) ; 



This alert statement has a parameter with no quotes. Because the parame- 
ter has no quotes, JavaScript understands that you don't really want to say 
the text person. Instead, it looks for a variable named person, and returns 
the value of that variable. 



The variable can take any name, store it, and return a customized greeting. 



Using Concatenation to Build Better Greetinqs 

It seems a little awkward to have a greeting and a person's name on two dif- 
ferent lines. Figure 1-5 shows a better solution. 



Figure 1-5: 

Once again, 
I ask the 
user for a 
name. 
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The program asks for a name again and stores it in a variable. This time, the 
greeting is combined into one alert (see Figure 1-6), and it looks a lot better. 
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Figure 1-6: 

wlhe 



is infegrafeii 
into the 
greeting. 




[JavaScript Application] 



k there, Matthew 1 



The secret to Figure 1-6 is one of those wonderful gems of the computing 
world: a really simple idea with a really complicated name. The term "con- 
catenation" is a delightfully complicated word for a basic process. Take a 
look at the following code, and you see that combining variables with text is 
not all that complicated: 



<script type = "text/ javascript"> 
//<! [CDATA [ 
// from concat.html 



var person = " " ; 

person = prompt ( "What is your name?"); 
alert ("Hi there, " + person + "!"); 



//]]> 
</script> 



For the sake of brevity I include only the script tag and its contents through- 
out this chapter. The rest of this page is a standard blank XHTML page. As 
always, you can see the complete document on the Web site or CD-ROM. I do 
include a comment in each JavaScript snippet that indicates where you can 
get the entire file on the CD-ROM. 



Comparing literals and Variables 

The program concat . html contains two different kinds of text. The term 
"Hi there, " is a literal text value. That is, you really mean to say "Hi there, " 
(including the comma and the space). Person is a variable. (For more on 
variables, see the section "Introducing Variables," earlier in this chapter. 

You can combine literal values and variables in one phrase if you want: 



alert ("Hi there, " + person + "!"); 



The secret to this code is to follow the quotes. " Hi there , " is a literal 
value, because it is in quotes. On the other hand, person is a variable name, 
because it is not in quotes, and " ! " is a literal value. You can combine any 
number of text snippets together with the plus sign. 

Using the plus sign to combine text is called concatenation. (I told you it was 
a complicated word for a simple idea.) 
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Including spaces in your concatenated phrases 

_Yoli m 2Z be cur i° us about the extra space between the comma and the 
J fj fjJdfeC^the output line: 



alert ("Hi there, 



+ person + 



This extra space is important because you want the output to look like a 
normal sentence. If you don't have the space, the computer doesn't add one, 
and the output looks like this: 




Hi there , Ben j amin ! 

You need to construct the output as it should look, including spaces and 
punctuation. 



Understanding the String Object 



The person variable used in the previous program is designed to hold text. 
Programmers (being programmers) devised their own mysterious term to 
refer to text. In programming, text is referred to as string data. 



Concatenation and your editor 



The hard part about concatenation is figuring 
out which part of your text is a literal value and 
which part is a string. It won't take long before 
you start going cross-eyed trying to understand 
where the quotes go. 

Modern text editors (like Aptana) have a won- 
derful feature that can help you here. They 
color different kinds of text in different colors. 
By default, Aptana colors variable names black 
and literal text dark green (at least when you're 
in JavaScript — in HTML, literal text is in blue). 

I personally find it hard to differentiate the dark 
green from black, so I changed the Aptana 
color scheme. I have it make string literals blue 
whether I'm in JavaScript or HTML. I find this 
color more consistent and easier for me to 
read. With this setting in place, I can easily see 
what part of the statement is literal text and 



what's being read as a variable name. That 
makes concatenation a lot easier. 

To change the color scheme in Aptana, choose 
WindowOPreferences. An expandable outline 
appears in the resulting dialog box. In the sec- 
tion Aptana — Editors — JavaScript Editor — 
colors, scroll down to find color settings for any 
type of data. I found string (another term for 
text) under literals and changed the color from 
dark green to blue. 

If you make a mistake, the "Restore Defaults" 
button reverts back to the default values. 

Most editors that have syntax highlighting 
allow you to change settings to fit your needs. 
Don't be afraid to use these tools to help you 
program better. 
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The term string comes from the way text is stored in computer memory. Each 
~ ^character is stored in its own cell in memory, and all the characters in a word 
rase reminded the early programmers of beads on a string. Surprisingly 
for a bunch of geeks, huh? 





cnaraci 
Icf pHra 



Introducing object-based programming (and coWs) 

JavaScript (and many other modern programming languages) use a powerful 
model called object-oriented programming (OOP). This style of programming 
has a number of advantages. Most important for beginners, it allows you 
access to some very powerful objects that do interesting things out of the box. 

Objects are used to describe complicated things that can have a lot of char- 
acteristics — like a cow. You can't really put an adequate description of a 
cow in an integer variable. 

In many object-oriented environments, objects can have the following char- 
acteristics. (Imagine a cow object for the examples.) 

♦ Properties: Characteristics about the object, such as breed ( ) and age ( ) 

♦ Methods: Things the objects can do, such as moo ( ) and giveMilk ( ) 
4- Events: Stimuli the object responds to, such onTip 

I describe each of these ideas throughout this minibook, as not all objects 
support all these characteristics. 

If you have a variable of type cow, it describes a pretty complicated thing. 
This thing might have properties, methods, and events, all which can be 
used together to build a good representation of a cow. (Believe it or not, I've 
built cow programming constructs more than once in my life — and you 
thought programming was dull!) 

Most variable types in Java are actually objects, and most JavaScript objects 
have a full complement of properties and methods; many even have event 
handlers. Master how these things work, and you've got a powerful and 
compelling programming environment. 

Okay, before you send me any angry e-mails, I know debate abounds about 
whether JavaScript is a truly object-oriented language. I'm not going to get 
into the (frankly boring and not terribly important) details in this beginner 
book. We're going to call JavaScript object-oriented for now, because it's 
close enough for beginners. If that bothers you, you can refer to JavaScript 
as an object-based language. Nearly everyone agrees with that. You can find 
out more information on this topic throughout this minibook as you dis- 
cover how to use HTML elements as objects in Chapter 5. 
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Investigating the length of a string 

^Wken you assign text to a variable, JavaScript automatically treats the variable 
J |fj fj IJ Jasli^mSg object. The object instantly takes on the characteristics of a string 
P"^ ^^bject^Strings have a couple of properties and a bunch of methods. The one 

interesting property (at least for beginners) is length. Look at the example in 
Figure 1-7 to see the length property in action. 



Figure 1-7: 

This 
program 
reports the 
length of 
any text. 



[JavaScript Application] 



The name Jacob is 5 characters long. 



That's kind of cool how the program can figure out the length of a phrase. 
The cooler part is the way it works. As soon as you assign a text value to a 
variable, JavaScript treats that variable as a string, and because it's a string, 
it now has a length property. This property returns the length of the string 
in characters. Here's how it's done in the code. 

<script type = "text/javascript"> 
//< ! [CDATA [ 

/ / f r om nameLength . html 

var person = prompt ( "Please enter your name."); 
var length = person. length; 

alert ("Hi, " + person + "!"); 

alert ("The name " + person + " is " + length + " characters long."); 

//] ]> 
</script> 




A property is used like a special subvariable. For example, person is a vari- 
able in the previous example, person . length is the length property of 
the person variable. In JavaScript, an object and a variable are connected 
by a period (with no spaces). 

The string object in JavaScript has only two other properties (constructor 
and prototype). Both of these properties are needed only for advanced 
programming, so I skip them for now. 
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Using string methods to manipulate text 

The length property is kind of cool, but the string object has a lot more up 
its sleeve. Objects also have methods (things the object can do). Strings in 
JavaScript have all kinds of methods. Here are a few of my favorites: 
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♦ toUpperCase ( ) makes an entirely uppercase copy of the string. 

♦ ^toLowerCase ( ) makes an entirely lowercase copy of the string, 
bstring ( ) returns a specific part of the string. 

♦ indexOf ( ) determines whether one string occurs within another. 





The string object has many other methods, but I'm highlighting the preced- 
ing because they're useful for beginners. Many string methods, such as 
big ( ) and fontcolor ( ) , simply add HTML code to text. They aren't used 
very often because they produce HTML code that won't validate, and they 
don't really save a lot of effort anyway. Some other methods, such as 
search ( ) , replace ( ) , and slice ( ) , use advanced constructs like arrays 
and regular expressions that aren't necessary for beginners. (To find out 
more about working with arrays, see Chapter 4 of this minibook. You can 
find out more about regular expressions in Chapter 6.) 

Don't take my word for it. Look up the JavaScript string object in the Aptana 
online help (or one of the many other online JavaScript references) and see 
what properties and methods it has. 

Like properties, methods are attached to an object by the period. Methods 
are distinguished by a pair of parentheses, which sometimes contains spe- 
cial information called parameters. 

The best way to see how methods work is to look at some in action. Look at 
the code for stringMethods . html: 



<script type = "text/javascript"> 
//<! [CDATAt 

//from stringMethods.html 



var text = prompt { "Please enter some text."); 



alert ("I '11 shout it out:"); 
alert (text . toUpperCase ( ) ) ; 

alert ( "Now in lowercase. . . 11 ) ; 
alert (text . toLowerCase ( ) ) ; 



alert ("The first 'a' is at letter..."); 
alert (text . indexOf ( "a" ) ) ; 

alert ("The first three letters are ..."); 
alert (text . substring ( 0 , 3)); 



//] ]> 
</script> 



Figure 1-8 displays the output produced by this program. 
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OK 1 Cancel 



[JavaScript Application] 

f I'll shout it out: 



[JavaScript Application] 

■ The first 'a' is at letter.. 

lis 



[JavaScript Application] 



JAVASCRIPT ROCKS' 



[JavaScript Application] 


ds 1 







[JavaScript Application] 



Now m Icvercase.. 



Figure 1-8: 

String 
methods 
can be fun. 



[JavaScript Application] 


m 


I javascript rocks 1 





[JavaScript Application] 


f The first three 


etters are . . , 


"OK | 





[JavaScript Application] 






t OK 1 




Here's yet another cool thing about Aptana. When you type the term text, 
Aptana understands that you're talking about a string variable and automati- 
cally pops up a list of all the possible properties and methods. I wish I'd had 
that when I started doing this stuff! 

Book IV 

You can see from the preceding code that methods are pretty easy to use. Chapter 1 

Once you have a string variable, you can invoke the variable name followed 
by a period and the method name. Some methods require more information g n 

to do their job. Here are the specifics: 3- S 

♦ toUpperCase ( ) and toLowerCase ( ) take the value of the variable and gj £5 

convert it entirely to the given case. This method is often used when you 5 ji 

aren't concerned about the capitalization of a variable. "5 °- 
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♦ indexOf (substring) returns the character position of the substring 
within the variable. If the variable doesn't contain the substring, it returns 
e value -1. 



bstring (begin, end) returns the substring of the variable from 
the beginning character value to the end. 



Understanding Variable Types 

JavaScript isn't too fussy about whether a variable contains text or a number, 
but the distinction is still important because it can cause some surprising prob- 
lems. To illustrate, take a look at a program that adds two numbers together, 
and then see what happens when you try to get numbers from the user to add. 

Adding numbers 

First, take a look at the following program: 

<script type = "text/javascript"> 
//<! [CDATA 

//from addNumbers.html 

var x = 5 ; 
var y = 3 ; 
var sum = x + y; 

alert (x + " plus " + y + " equals " + sum) ; 

//] ]> 
</script> 

(As usual for this chapter, I'm only showing the script part because the rest 
of the page is blank.) 



Why are the first three characters (0, 3)? 



The character locations for JavaScript (and 
most programming languages) will seem some- 
what strange to you until you know the secret. 
You may expect text . substring (1,3) 
to return the first three characters of the vari- 
able text, yet I used text, sub- 
string (0 , 3 ) . Here's why: The indices don't 



refer to the character numbers but to the 
indices between characters. 

|a|b|c|d| 
0 12 3 4 

So, if I want the first three characters of the 
string "abed", I use substring ( 0 , 3 ) . If I 
want the "cd" part, it's substring (2 , 4) . 
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This program features three variables. I've assigned the value 5 to x, and 3 to y. 
I then add x + y and assign the result to a third variable, sum. The last line 
,e results, which are also shown in Figure 1-9. 



Figure 1-9: 

This 

program 

(correctly) 

adds two 

numbers 

together. 



[JavaScript Application] 



Note a few important things from this example: 

♦ You can assign values to variables. It's best to read the equals sign as 
"gets" so that the first assignment is read as "variable x gets the value 5.' 



Numeric values aren't enclosed in quotes. When you refer to a text literal 
value, it's always enclosed in quotes. Numeric data, such as the value 5, 
isn't placed in quotes. 

You can add numeric values. Because x and y both contain numeric 
values, you can add them together. 

You can replace the results of an operation in a variable. The result of 
the calculation x + y is placed in a variable called sum. 

Everything works as expected. The behavior of this program works as 
expected. That's important because it's not always true. (You can see an 
example of this behavior in the next section — I love writing code that 
blows up on purpose!) 



Adding the user's numbers 



The natural extension of the addNumbers .html program is a feature that 
allows the user to input two values and then returns the sum. This program 
can be the basis for a simple adding machine. Here's the JavaScript code: 



<script type = "text/javascript"> 
//< ! [CDATA [ 

//from addInputWrong.html 
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var x = prompt ( " first number : " ) ; 
var y = prompt ( " second number : " ) 
var sum = x + y; 
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alert (x + " plus " + y + " equals " + sum); 
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//] ]> 

cript> 



This code seems reasonable enough. It asks for each value and stores them 
in variables. It then adds the variables up and returns the results, right? Well, 
look at Figure 1-10 to see a surprise. 



[JavaScript Application] 



[JavaScript Application] 



second number: 



Figure 1-10: 

Wait a 
minute . . . 
3 + 5 = 35??? 



[JavaScript Application] 




f 3 plus 5 equals 35 






j; ok 





Something's obviously not right here. To understand the problem, you need 
to see how JavaScript makes guesses about data types (see the next section). 

The trouble With dynamic data 

Ultimately, all the information stored in a computer, from music videos to 
e-mails, is stored as a bunch of ones and zeroes. The same value 01000001 
can mean all kinds of things: It may mean the number 65 or the character A. 
(In fact, it does mean both those things in the right context.) The same 
binary value may mean something entirely different if it's interpreted as a 
real number, a color, or a part of a sound file. 

The theory isn't critical here, but one point is really important: Somehow the 
computer has to know what kind of data is stored in a specific variable. 
Many languages, such as C and Java, have all kinds of rules about defining 
data. If you create a variable in one of these languages, you have to define 
exactly what kind of data will go in the variable, and you can't change it. 
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JavaScript is much more easygoing about variable types. When you make a 
variable, you can put any kind of data in it that you want. In fact, the data 
change. A variable can contain an integer at one point, and the 
iable may contain text in another part of the program. 

JavaScript uses the context to determine how to interpret the data in a par- 
ticular variable. When you assign a value to a variable, JavaScript puts the 
data in one of the following categories: 

♦ Integers are whole numbers (no decimal part). They can be positive or 
negative values. 

♦ A floating point number has a decimal point — for example, 3.14. You can 
also express floating point values in scientific notation, such as 6.02e23 
(Avagadro's number -6.02 times 10 to the 23rd). Floating point numbers 
can also be negative. 

♦ A Boolean value can only be true or false. 

♦ Text is usually referred to as string data in programming languages. 
String values are usually enclosed in quotes. 

♦ Arrays and objects are more complex data types that you can ignore for now. 

Most of the time, when you make a variable, JavaScript guesses right, and 
you have no problems. But sometimes, JavaScript makes some faulty 
assumptions, and things go wrong. 

The pesky ptus siqn 

I've used the plus sign in two different ways throughout this chapter. The 
following code uses the plus sign in one way (concatenating two string values): 

var x = "Hi, " ; 
var y = " there ! 11 ; 

result = x + y; 
alert (result) ; 

In this code, x and y are text variables. The result = x + y line is inter 
preted as "concatenate x and y," and the result is " Hi , there ! " 

Here's the strange thing: The following code is almost identical. 

var x = 3 ; 
var y = 5 ; 

result = x + y; 
alert (result) ; 

Strangely, the behavior of the plus sign is different here, even though the 
statement result = x + y is identical in the two code snippets! 
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In this second case, x and y are numbers. The plus operator has two entirely 
different jobs. If it's surrounded by numbers, it adds. If it's surrounded by 
concatenates! 

what happened to the first adding machine program. When the user 
enters data in prompt dialogs, JavaScript assumes that the data is text. 
When I try to add x and y, it "helpfully" concatenates instead. 

There's a fancy computer science word for this phenomenon (an operator 
doing different things in different circumstances). Those Who Care About 
Such Things call this mechanism an overloaded operator. Smart people some- 
times have bitter arguments about whether overloaded operators are a good 
idea because they can cause problems like this one, but they can also make 
things easier in other contexts. I'm not going to enter into that debate here. 
It's not really a big deal, as long as you can see the problem and fix it. 



Changing Variables to the Desired Type 

If JavaScript is having a hard time figuring out what type of data is in a vari- 
able, you can give it a friendly push in the right direction with some handy 
conversion functions, as shown in Table 1-1. 







Table 1-1 \ 


/ariable Conversion Functions 




Function 


From 




To 


Example 


Result 


parselntO 


String 




Integer 


parselnt("23") 


23 


parseFloatO 


String 




Floating point 


parseFloat("21.5" 


) 21.5 


toStringO 


Any variable 




String 


myVar.toStringO 


varies 


eval() 


Expression 




Result 


eval("5 + 3") 


8 


Math.ceilO 


Floating point 


Integer 


Math.ceil(5.2 


6) 


Math.floorO 








Math.floor(5.2) 


5 


Math.roundO 








Math.round(5.2) 


5 



Using Variable conversion toots 

The conversion functions are incredibly powerful, but you only need them if 
the automatic conversion causes you problems. Here's how they work: 

♦ parseint ( ) is used to convert text to an integer. If you put a text value 
inside the parentheses, the function returns an integer value. If the 
string has a floating point representation (4.3 for example) an integer 
value (4) is returned. 
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♦ parseFloat ( ) converts text to a floating point value. 

■-^ -4| toString () takes any variable type and creates a string representa- 

1 Kr"^ 1T\ C\ f \ Itfi^i Note that it isn't usually necessary to use this function, because it's 
' ' nswllly invoked automatically when needed. 

♦ eval 0 is a special method that accepts a string as input. It then attempts 
to evaluate the string as JavaScript code and return the output. You can 
use this method for variable conversion or as a simple calculator — 
eval ( " 5 + 3 " ) returns the integer 8. 

♦ Math, ceil ( ) is one of several methods of converting a floating point 
number to an integer. This technique always rounds upward, so 
Math, ceil (1 . 2 ) is 2, and Math . ceil ( 1 . 8 ) is also 2. 

♦ Math, floor () is similar to Math . ceil (), except it always rounds 
downward, so Math . floor (1.2) and Math . floor (1.8) will both 
evaluate to 1. 

♦ Math . round ( ) works like the standard rounding technique used in 
grade school. Any fractional value less than .5 rounds down, and greater 
than or equal to .5 rounds up, so Math . round (1.2) is 1, and 
Math . round (1.8) is 2 . 

Fixing the addlnput code 

With all this conversion knowledge in place, it's pretty easy to fix up the 
addinput program so that it works correctly. Just use parseFloat ( ) to 
force both inputs into floating-point values before adding them. Note that 
you don't have to explicitly convert the result to a string. That's automati- 
cally done when you invoke the alert ( ) method. 

//<! [CDATA [ 
// from addlnput.html 

var x = prompt (" first number:"); 
var y = prompt ( " second number : " ) ; 
var sum = parseFloat (x) + parseFloat (y) ; 

alert (x + " plus " + y + " equals " + sum); 

//] ]> 

You can see the program works correctly in Figure 1-11. 

Conversion methods allow you to ensure that the data is in exactly the 
format you want. 
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Figure 1-11: 

Now the 
program 
asks for 
input and 
correctly 
returns the 
sum. 



[JavaScript Application] 
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*) first number: 



[JavaScript Application] 



m 



second number: 



[JavaScript Application] 



j 3 plus 5 equals 3 
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In This Chapter 

V Generating random numbers and integers 
\^ Working with conditions 

V Using the if-else and switch structures 
Handling unusual conditions 



■ Mne of the most important aspects of computers is their apparent ability 
to make decisions. Computers can change their behavior based on cir- 
cumstances. In this chapter, you discover how to maximize this decision- 
making ability. 



Working With Random Numbers 

Random numbers are a big part of computing. They add uncertainty to 
games, but they're also used for serious applications, such as simulations, 
security, and logic. Most languages have a feature for creating random num- 
bers, and JavaScript is no exception. The Math . random ( ) function returns 
a random floating point value between zero and one. 

Technically, computers can't create truly random numbers. Instead, they 
use a complex formula that starts with one value and creates a second semi- 
predictable value. In JavaScript, the first value (called the random seed) is 
taken from the system clock in milliseconds, so the results of a random 
number call seem truly random. 

Creating an integer Within a range 

Creating a random floating point number between zero and one is easy, 
thanks to the Math . random ( ) function. What if you want an integer within 
a specific range? For example, say that you want to simulate rolling a six-sided 
die. How do you get from the 0-to-l floating point value to a l-to-6 integer? 

Here's the standard approach: 




1. Get a random float between 0 and 1 using the Math, random ( ) function. 
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2. Multiply that value by 6. 

This step gives you a floating point value between 0 and 5.999 (but never 6). 
e math . ceil ( ) to round up. 



At this point, you need to convert the number to an integer. In Book 4, 
Chapter 1, 1 mention three functions you can use to convert from a float 
to an integer. Math . ceil ( ) always rounds up, which means you'll 
always get an integer between 1 and 6. 

Building a program that rods dice 

The following RollDie . html code helps you simulate rolling a six-sided die. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /KH" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>rollDie .html</title> 
<script type = "text/javascript"> 

//<! [ CDATA [ 

// from rollDie.html 

var number = Math . random ( ) ; 
alert (number) ; 

var biggerNumber = number * 6 ; 
alert (biggerNumber) ; 

var die = Math. ceil (biggerNumber) ; 
alert (die) ; 

//] ]> 

</script> 
</head> 

<body> 

<div id = " output "> 

</div> 
</body> 
</html> 

As you can see, I converted the strategy from the previous section directly 
into JavaScript code: 

7. Create a random float. 

The Math . random ( ) function creates a random floating point number 
and stores it in the variable number. 

2. Multiply the number by 6 to move the number into the appropriate 
range (6 values). 

I multiplied by 6 and stored the result in biggerNumber. 
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3. Round up. 

I, used the Math . ceil ( ) function to round the number up to the next 
.est integer. 



Figure 2-1 shows the program running. 



[JavaScript Application] 










^j, 0.8414894843395693 

I OK | 
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f 5.048936906O37419 




Figure 2-1: 


1 OK | 




This pro- 




gram gener- 


[JavaScript Application] 
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between 1 


ds 6 




and 6. 


t OK i 






You may need to run the rollDice .html page a few times to confirm that it 
works as suspected. 

If you want to rerun a program you've already loaded into the browser, just 
hit the page refresh button on the browser toolbar. 



Using if to Control Ftou/ 



If you can roll a die, you'll eventually want different things to happen based 
on the results of the die roll. Figure 2-2 shows two different runs of a simple 
game called deuce.html. 

Okay, it's not that exciting. I promise to add dancing hippos in a later version. 

In any case, the "You got a Deuce!" message happens only when you roll a 2. 
The code is simple but profound: 

<script type = "text/javascript"> 
//< ! [CDATA [ 

// get a random number 
// If it's a two, you win 
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var die = Math. ceil (Math. random( ) * 6); 
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alert (die) ; 
if (die == 2) { 

alert ("You got a Deuce!"); 
} // end if 




//] ]> 
</script> 



As usual, I'm showing only the script tag and its contents here, because the 
rest of the page is blank. 




Figure 2-2: 

Something 
exciting 
happens 
when you 
roll a two. 




[JavaScript Application] 



■ You got a Deuce 



The basic if statement 

The key to deuce . html is the humble if statement. This powerful com- 
mand does a number of important things: 

♦ It sets up a condition. The main idea behind a condition is that it's a 
true or false question. An if statement always includes some type of 
condition in parentheses. (For more on conditions, see the next section.) 

♦ It begins a block of code. An i f statement sets up a chunk of code that 
doesn't always execute. The end of the if line includes a left brace ({). 

♦ It usually has indented code under it. The line or lines immediately 
after the if statement are part of the block, so they're indented to indi- 
cate that they're special. 

♦ It ends several lines later. The end of the i f statement is actually the 
right brace (}) several lines down in the code. In essence, an if state- 
ment contains other code. 

♦ It's indented. The convention is to indent all the code between the if 
statement and its ending brace. 
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ugh not required, many programmers add a comment to indicate that 
ght brace ends an if statement. In the C-like languages, the same 
qH}^) is used to end a bunch of things, so it's nice to remind yourself 
think you're ending here. 

Aii about conditions 

A condition is the central part of if and several other important structures. 
Conditions deserve a little respect on their own. A condition is an expression 
that can be evaluated to true or false. Conditions come in three main flavors: 




♦ Comparison: By far the most common kind of condition. Typically, you 
compare a variable to a value, or two variables to each other. Table 2-1 
describes a number of different types of comparisons. 

♦ Boolean variable: A variable that contains only true or false. In 
JavaScript, any variable can be a Boolean, if you assign it true or false 
as a value. You don't need to compare a Boolean to anything else 
because it's already true or false. 

♦ Boolean function: Returns a true or false value, and you can also use 
this type of function as a condition. 




Incidentally, Boolean variables are the only variable type capitalized in most 
languages. They were named after a person, George Boole, a nineteenth cen- 
tury mathematician who developed a form of binary arithmetic. Boole died 
thinking his research a failure. His work eventually became the foundation of 
modern computing. Drop a mention of George at your next computer science 
function to earn mucho geek points. 



Comparison operators 

JavaScript supports a number of different types of comparisons summarized 
in Table 2-1. 











Table 2-1 




Comparison Operators 


Name 


Operator 


Example 


Notes 


Equality 
strings. 




(x==3) 


Works with all variable types, including 


Not equal 


i - 


(x != 3) 


True if values are not equal. 


Less than 


< 


(x < 3) 


Numeric or alphabetical comparison. 


Greaterthan 


> 


(x > 3) 


Numeric or alphabetical comparison. 


Less than 
or equal to 


<= 


(x <= 3) 


Numeric or alphabetical comparison. 


Greaterthan 
or equal to 


>= 


(x >= 3) 


Numeric or alphabetical comparison. 
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You should consider a few things when working with conditions: 
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sure the variable types are compatible. You'll get unpredictable 
suits if you compare a floating point value to a string. 




You can compare string values. In JavaScript, you can use the inequal- 
ity operators to determine the alphabetical order of two values. (This 
ability isn't possible in most other languages.) 

♦ Equality uses a double equal sign. The single equal sign ( = ) is used to 
indicate assignment. When you're comparing variables, use a double 
equal ( == ) instead. 

Don't confuse assignment with comparison! If you accidentally say (x = 3) 
instead of (x == 3 ) , your code won't crash, but it won't work properly. The 
first statement simply assigns the value 3 to the variable x. It returns the value 
true if the assignment was successful (which it will be). You'll think you're 
comparing x to 3, but you're assigning 3 to x, and the condition will always be 
true. Keeping these two straight is a nightmare. I still mess it up once in a while. 



Using the else Clause 

The deuce game, described in the section "Using if to Control Flow," is pretty 
exciting and all, but it would be even better if you had one comment when 
the roll is a 2 and another comment when it's something else. Figure 2-3 
shows a program with exactly this behavior. 





[JavaScript Application] 




Figure 2-3: 


f You got a Deuce! 




You get one 
message for 


1 « 1 




deuces and 






another 


[JavaScript Application] 




message for 
everything 


■ . Its only a 3. 

lis 




else. 


1 = 1 





This program uses the same type of condition as the earlier deuce game, but 
it adds an important section: 

<script type = "text/javascript"> 
//<! [CDATA [ 

// from deuceOrNot.html 

var die = Math. ceil (Math. random( ) * 6); 
if (die == 2) { 
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alert ("You got a deuce!"); 
} else { 

alert ("It's only a " + die + 
./ end if 



</script> 

The if statement is unchanged, but now an else clause appears. Here's 
how the program works: 

/. The if statement sets up a condition. 

The if statement indicates the beginning of a code branch, and it pre- 
pares the way for a condition. 

2. The condition establishes a test. 

Conditions are true or false expressions, so the condition indicates 
something that can be true or false. 

3. If the condition is true, the code between the condition and the else 
clause runs. 

After this code is finished, control moves past the end of the if structure. 

4. If the condition is false, the code between else and the end of the if 
statement runs instead. 




Figure 2-4: 

A die for the 
true geek 
gamer. 



The else clause acts like a fork in the road. The code goes along one path or 
another (depending on the condition) but never both paths at once. 

You can put as much code as you want inside an if or else clause, including 
more i f statements! 

The else clause is used only in the context of an if statement. You can't 
use else by itself. 

Using else if for more complex interaction 

The if - else structure is pretty useful when you have only two branches, 
but what if you want to have several different options? Figure 2-4 shows a die 
only a geek could love. All its values are output in binary notation. (For more 
on binary notation, see the sidebar "Binary?") 
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Binary? 



SWaJyTOfaf/bms the underlying structure of all 
data in a computer. It uses ones and zeroes to 
store other numbers, which you can combine 
to form everything you see on the computer, 
from graphics to text to music videos and 
adventure games. Here's a quick conversion 
chart so that you can read the dice: 



You can survive just fine without knowing binary 
(unless you're a computer science major — 
then you're expected to dream in binary). Still, 
it's kind of cool to know how things really work. 



6 



3 



4 



5 



011 



101 



110 



100 



Die Number Binary Notation 



001 



2 



010 



A simple if -else structure isn't sufficient here because you have six differ- 
ent options, (if -else gives you only two choices.) Here's some code that 
uses another variation of if and else: 

<script type = "text/javascript"> 
//<! [CDATA [ 

// from binaryDice.html 

var die = Math. ceil (Math. random( ) * 6); 
if (die == 1) { 

alert ( "001" ) ; 
} else if (die == 2) { 

alert ( "010" ) ; 
} else if (die == 3) { 

alert ( "011" ) ; 
} else if (die == 4) { 

alert ( "100" ) ; 
} else if (die == 5) { 

alert ( "101" ) ; 
} else if (die == 6) { 

alert ( "110" ) ; 
} else { 

alert ( "something strange is happening. . . " ) ; 
} // end if 



This program begins with an ordinary if statement, but it has a number of 
else clauses. You can include as many else clauses as you want if each 
includes its own condition. 



//] ]> 

</script> 
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For example, imagine the computer generates the value 3. 
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first condition (die == 1) is false, so the program immediately 
* to the next else. 



2. Step 1 sets up another condition (die == 2), which is also false, so 
control goes to the next else clause. 

3. This step has yet another condition (die == 3), which is true, so the 
code inside this clause executes (alerting the value "Oil"). 

4. A condition has finally been triggered, so the computer skips all the 
other else conditions and moves to the line after the end if. 

5. This step is the last line of code, so the program ends. 



Soitfinq the mystery of the unnecessary etse 

When you use multiple conditions, you can (and should) still indicate an 
ordinary else clause without a condition as your last choice. This special 
condition sets up code that should happen if none of the other conditions is 
triggered. It's useful as a fallback position, in case you didn't anticipate a 
condition in the else if clauses. 



If you think carefully about the binary dice program, the else clause seems 
superfluous. (I love that word.) It isn't really necessary! You went through all 
that trouble to create a random number scheme that guarantees you'll have 
an integer between 1 and 6. If you checked for all six values, why have an 
else clause? It should never be needed. 



There's a big difference between what should happen and what does 
happen. Even if you think you've covered every single case, you're going to 
be surprised every once in a while. If you use a multiple if structure, you 
should always incorporate an else clause to check for surprises. It doesn't 
need to do much but inform you that something has gone terribly wrong. 



Using switch for More Complex Branches 

When you have one expression that may have multiple values — as is the 
case when rolling a die, as described in the preceding sections — you may 
want to take advantage of a handy tool for exactly this type of situation. Take 
a look at Figure 2-5, which is a variation of the die roller. 
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npt Application] 



Once again, I start with an ordinary 1-6 integer and assign a new value based 
on the original roll. This time, I use another structure specialized for "one 
expression with lots of values" situations. Take a look at the following code: 



<script type = "text/javascript"> 
//<! [CDATA [ 

// from RomanDice.html 

var die = Math. ceil (Math. randomf ) * 6); 
var output = " " ; 
switch (die) { 
case 1 : 

output = " I " ; 

break ; 
case 2 : 

output = " II " ; 

break ; 
case 3 : 

output = 11 III " ; 

break ; 
case 4 : 

output = 11 IV" ; 

break ; 
case 5 : 

output = "V" ; 

break ; 
case 6 : 

output = "VI " ; 

break; 
default : 

output = " PROBLEM! ! ! " ; 
} // end switch 



Creating an expression 

The switch structure in the preceding code is organized a little bit differently 
than the if-else if business. 

The switch keyword is followed immediately by an expression in parentheses. 
The expression is usually a variable with several possible values. The switch 
structure then provides a series of test values and code to execute in each case. 
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To create a switch statement: 
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with the switch keyword. 




step sets up the structure. You'll indent everything until the right 
brace (}) that ends the switch. 

2. Indicate the expression. 

The expression is usually a variable you want to compare against sev- 
eral values. The variable goes inside parentheses and is followed by a 
left brace ({). 

3. Identify the first case. 

Indicate the first value you want to compare the variable against. Be 
sure the case is the same type as the variable. 

4. End the case description with a colon (:). 

Be careful! Case lines end with a colon (indicating the beginning of a case) 
rather than the more typical semicolon. It's easy to forget this difference. 

5. Write code for the case. 

You can write as many lines of code as you want. This code executes 
only if the expression is equal to the given case. Typically all the code in 
a case is indented. 

6. Indicate the end of the case with a break statement. 

This statement tells the computer to jump out of the switch structure as 
soon as this case has been evaluated (which is almost always what 
you want). 

7. Repeat with other cases. 

Build similar code for all the other cases you wish to test. 

8. Trap for surprises with default. 

The special case default works like the else in an else if structure: 

It manages any cases that haven't already been trapped. Even if you Book lv 

think you've got all the bases covered, you should put some default Chapter 2 
code in place just in case. 

You don't need to put a break statement in the default clause, ~ |r 

because it always happens at the end of the switch structure anyway. e-s<il 

3 D 

O. CD 

Switching With style 1 1 

The switch structure is powerful, but it can be tricky because the format is w = 

a little strange. Here are a few tips to keep in mind: 

♦ You can compare any type of expression. If you've used another language 
(like C or Java), you may have learned that switches only work on numeric 
values. You can use JavaScript switches on any data type. 
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♦ It's up to you to get the type correct. If you're working with a numeric 
variable and you compare it against string values, you may not get the 
suits you're looking for. 




forget the colons. At first glance, the switch statement uses 
semicolons like most other JavaScript commands. Cases end with 
colons (:). Getting confused is easy to do. 

♦ Break each case. Use the break statement to end each case, or you'll 
get weird results. 

Wouldn't arrays be better? If you've got some programming experience, you 
may argue that another solution involving something called arrays is a better 
solution for this particular problem. I tend to agree, but for that solution, go 
to Chapter 4 of this minibook. Switches and if - else if structures do 
have their place, too. 



Nesting if Statements 




You can combine conditions in all kinds of crazy ways. One decision can include 
other decisions, which may incorporate other decisions. You can put if state- 
ments inside each other to manage this kind of (sometimes complicated) logic. 

Figure 2-6 shows a particularly bizarre example. Imagine that you're watch- 
ing the coin toss at your favorite sporting event. Of course, a coin can be 
heads or tails. Just for the sake of argument, the referee also has a complex 
personality. Sometimes he's a surfer, and sometimes he's a L337 94m3r 
(translation: elite gamer). Figure 2-6 shows a few tosses of the coin. 

I don't know why the referee is sometimes a surfer and sometimes a L337 
94m3r. Perhaps he faced a particularly bizarre set of childhood circumstances. 



What's this L337 stuff? 



Leet (L337) is a wacky social phenomenon pri- 
marily born of the online gaming community. 
Originally, it began as people tried to create 
unique screen names for multiplayer games. If 
you wanted to call yourself "gamer," for exam- 
ple, you'd usually find the name already taken. 
Enterprising gamers started substituting similar- 



looking letters and numbers (and sometimes 
creative spelling) to make original names that 
are still somewhat readable. The practice 
spread, and now it's combined with text mes- 
saging and online chat shortcuts as a sort of 
geek code. Get it? L337 94m3r is Leet Gamer, or 
Elite Gamer. 
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[JavaScript Application] 



Dude' It's totally tails' 



QK 



Figure 2-6: 

Heads or 
tails? Surfer 
or gamer? 



[JavaScript Application] 
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This example is getting pretty strange, so you may as well look at some code: 



<script type = "text/javascript"> 
//< ! [CDATA [ 
// from coinToss.html 
coin = Math. ceil (Math. random( ) * 2); 
character = Math. ceil (Math. randomf ) * 2); 
if {character == 1){ 

//It's a surfer referee 

if (coin == 1) { 

alert("You got heads, Dude."); 

} else { 

alert ("Dude! It's totally tails!"); 
} // end coin if 

} else { 

//now it's a L337 Referee 
if (coin == 1) { 

alert ("h34D$ r0xx0r$"); 

} else { 

alert ("741L$ ruL3 " ) ; 
} // end coin if 
} // end character if 
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Building the nested conditions 

If you understand how nested if structures work, you can see how the code 
all fits together. ™ = 

/. Flip a coin. 

I just used a variation of the die-rolling technique, described in the ear- 
lier sections. A coin can be only heads or tails, so I rolled a value that 
would be 1 or 2 for the coin variable. 
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2. Flip another coin for the personality. 
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The referee's persona is reflected in another random value 
tween 1 and 2. 



3. Check to see if you have a surfer. 

If the character roll is one, we have a surfer, so set up an if statement 
to handle the surfer's output. 

4. If it's the surfer, check the coin toss. 

Now that you know a surfer is speaking, check the coin for heads or 
tails. Another if statement handles this task. 

5. Respond to the coin toss in surfer-speak. 

Use alert ( ) statements to output the result in the surfer dialect. 

6. Handle the L337 character. 

The outer if structure determines which character is speaking. The 
else clause of this case will happen if character is not 1, so all 
the LEET stuff goes in the else clause. 

7. Check the coin again. 

Now that you know you're speaking in gamer code, determine what to say 
by consulting the coin in another i f statement 



Making sense of nested ifs 

Nested if structures aren't all that difficult, but they can be messy, especially 
as you get several layers deep (as you will, eventually). The following tips help 
make sure that everything makes sense: 



♦ Watch your indentation. Be vigilant on your indentation scheme. An 
editor like Aptana, which automatically indents your code, is a big plus. 
Indentation is a great way to tell what level of code you're on. 

♦ Use comments. You can easily get lost in the logic of a nested condition. 
Add comments liberally so that you can remind yourself where you are 
in the logic. Note that I specify which if statement is ending. 

♦ Test your code. Just because you think it works doesn't mean it will. 
Surprises will happen. Test thoroughly to make sure that the code does 
what you think it should do. 
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In This Chapter 

W Working with for loops 

W Building while loops 

C* Recognizing troublesome loops 

Catching crashes and logic errors 
W Using the Aptana line-by-line debugger 



Computers programs can do repetitive tasks easily, thanks to a series of 
constructs called loops. In this chapter, you discover the two major 
techniques for managing loops. 

Loops are powerful, but they can be dangerous. It's possible to create loops 
that act improperly, and these problems are difficult to diagnose. I demonstrate 
several powerful techniques for identifying issues in your code. 



Building Counting Loops With for 

A loop is a structure that allows you to repeat a chunk of code. One stan- 
dard type of loop — the for loop — repeats a chunk of code a certain 
number of times. Figure 3-1 Shows a for loop in action. 

Although it looks like ten different alert statements appear, only one exists; 
it's just repeated ten times. 



Figure 3-1: 

This loop 
repeats ten 
times before 
it stops. 
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v/ wN ' showed the first few dialogs and the last. You should be able to get the 
_idea. Be sure to look at the actual program on the CD-ROM to see how it 
.works. 



Buitding a standard (or hop 

You can see the structure of the for loop in the following code: 



<script type = "text/javascript"> 

//<! [CDATA [ 

//from BasicFor.html 

for (lap = 1; lap <= 10; lap++) { 
alert {"now on lap: " + lap + "."); 

} // end for 

//] ]> 
</script> 



for loops are based on an integer, which is sometimes called a sentry vari- 
able. In this example, lap serves as the sentry variable. You typically use the 
sentry variable to count the number of repetitions through a loop. 



The for statement has three distinct parts: 



♦ Initialization: This segment (lap = 1) sets up the initial value of the 
sentry. 

♦ Condition: The condition (lap <= 10) is an ordinary condition 
(although it doesn't require parentheses in this context). As long as the 
condition is evaluated as true, the loop will repeat. 

♦ Modification: The last part of the for structure (lap++) indicates how 
the sentry will be modified throughout the loop. In this case, I add 1 to 
the lap variable each time through the loop. 

The for structure has a pair of braces containing the code that will be 
repeated. As usual, all code inside this structure is indented. You can have 
as much code inside a loop as you want. 

The lap++ operator is a special shortcut. Adding 1 to a variable is common, 
so the lap++ operation means "add 1 to lap." You can also write lap = 
lap + 1, but lap++ sounds so much cooler. 




When programmers decided to improve on the C language, they called the 
new language C++. Get it? It's one better than C! Those computer scientists 
are such a wacky bunch! 



When you know how many times something should happen, for loops are 
pretty useful. 
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Counting backwards 

|""N ["^ ^^f 1 canmodify the basic for loop so that it counts backwards. Figure 3-2 

J | fj fj fj fyi^^* example of this behavior. 



Figure 3-2: 

This 
program 
counts 
backwards. 
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[JavaScript Application] 

f Backing up: 9 
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[JavaScript Application] 



j Backing up: 1 



The backward version of the for loop uses the same general structure as 
the forward version (shown in the preceding section), but with slightly dif- 
ferent parameters: 



<script type = " text/ javascript"> 
//< ! [CDATA [ 
/ / from backwards . html 

for (lap = 10; lap >= 1; lap--) { 

alert { "Backing up: " + lap); 
} / / end for 

//] ]> 
</script> 



If you want to count backwards, just modify the three parts of the 
for statement: 

♦ Initialize the sentry to a large number. If you're counting down, you Book IV 
need to start with a larger number than 0 or 1. Chapter 3 

♦ Keep going as long as the sentry is larger than some value. The code 
inside the loop will execute as long as the condition is true. The number 

will be getting smaller, so make sure that you're doing a greater than (>) o i- 

or greater than or equal to (>=) comparison. g- ° 

cn v> 

♦ Decrement the sentry. If you want the number to get smaller, you need "5- 2| 
to subtract something from it. The -- operator is a quick way to do so. It 10 °" 
subtracts 1 from the variable. 
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Counting by 5 

[You^an use the for loop to make other kinds of counting loops. If you want 
nt by fives, for example, you can use the following variation: 



<script type = "text/javascript"> 
//<! [CDATA [ 



//from byFive.html 

for (i = 5; i <= 25; i += 5) { 

alert (i) ; 
} // end for 



//]]> 
</script> 



This code starts i as five, repeats as long as i is less than or equal to 25, and 
adds 5 to i on each pass through the loop. Figure 3-3 illustrates this code in 
action. 



[JavaScript Application] 



± 



[JavaScript Application] 



Figure 3-3: 

for loops 
can also 
skip values. 



[JavaScript Application] 
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[JavaScript Application] 



If you want a for loop to skip numbers, you just make a few changes to the 
general pattern: 

♦ Build a sentry variable, using a sensible initial value. If you want the 
loop to start at 5, use that number as the initial value. 

♦ Check against a condition. It makes sense for a 5 loop to end at a multi- 
ple of 5. If you want this loop to continue until you get to 25, continue as 
long as i is less than or equal to 25. 

♦ Modify the variable on each pass. In the example, the statement i += 
5 adds 5 to i. (It's just like saying i = i + 5.) 
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Fortunately, all these elements are in the for loop structure, so you proba- 
bly won't overlook them. Still, if you find that your loop isn't working as 

, you may need to look into the debugging tricks described in the 
jJCatching Logic Errors" later in this chapter. 




Looping for a White 

The for loop is useful, but it has a cousin that's even more handy, the 
while loop. A while loop isn't tied to any particular number of repetitions. 
It simply repeats as long as its condition is true. 



Creating a basic White toop 

The basic while loop is deceptively simple to build. Here's an example: 

<script type = "text/javascript"> 
//< ! [CDATA [ 
// from while.html 

answer = "-99"; 

while (answer != "5"){ 

answer = prompt ( "What is 3 + 2?"); 
if (answer == "5" ) { 

alert ( "great ! " ) ; 
} else { 

alert ( 11 try again ..."); 
} // end if 
} // end while 



//]]> 
</script> 



This script asks the user a simple math question and keeps asking until the 
user responds correctly. You can see it in action in Figure 3-4. 



Figure 3-4: 

This loop 

continues 

until the 

user 

answers 

correctly. 
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The operation of a while loop is easy to understand. Here's how the math 
program works: 



eate a variable called answer to act as a sentry variable for the loop. 

2. Initialize the variable. 

The initial value of the variable is set to " - 99 ", which can't possibly be 
correct. That guarantees that the loop will execute at least one time. 

3. Evaluate the answer. 

In this particular program, the correct answer is 5. If the value of answer 
is anything but 5, the loop continues. In this example, I've preset the value 
of answer to " -99" so that the loop happens at least once. 

It. Ask the user a challenging math question. 

Well, a math question anyway. The important thing is to change the value 
of answer so that it's possible to get 5 in the answer and exit the loop. 

5. Give the user some feedback. 

It's probably good to let the user know how she did, so provide some 
sort of feedback. 



AiJoidinq ioop mistakes 

Awhile loop seems simpler than a for loop, but while has exactly the 
same basic requirements: 

♦ A critical sentry variable typically controls the loop. Some key variable 
usually (but not always) controls a while loop. 

♦ The sentry must be initialized. If the loop is going to behave properly, 
the sentry variable must still be initialized properly. In most cases, you'll 
want to guarantee that the loop happens at least one time. 

♦ You must have a condition. Like the for loop, while loops are based 
on conditions. As long as the condition is true, the loop continues. 

♦ You must include a mechanism for changing the sentry. Somewhere in 
the loop, you need to have a line that changes the value of the sentry. Be 
sure that it's possible to make the condition false, or you'll be in the loop 
forever! 

If you forget one of these steps, the while loop may not work correctly. 
Making mistakes in your while loops is easy. Unfortunately, these mistakes 
don't usually result in a crash. Instead, the loop may either refuse to run 
altogether or continue on indefinitely. If your loop has that problem, you'll 
want to make sure that you read the next section. 
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es loops don't behave. Even if you've got the syntax correct, your 
may not do what you want. The following sections describe two main 
kinds of loop errors: Loops that never happen, and loops that never quit. 



Managing the reluctant hop 

You may write some code and find that the loop never seems to run, as in 
the following program: 




<script type = "text/javascript"> 
//< ! [CDATA [ 

/ / from never . html 

//Warning! this script has a deliberate error! 
i = 1; 

while (i > 10) { 

i++; 
} // end while 

//] ]> 
</script> 

This code looks innocent enough, but if you run it, you'll be mystified. It 
doesn't crash, but it also doesn't seem to do anything. If you follow the code 
step by step, you'll eventually see why. I initialize i to 1, and then repeat as 
long as i is greater than 10. See the problem? i is less than 10 right now, so 
the condition starts out false, and the loop never executes! I probably meant 
for the condition to be ( i < 10 ) . It's a sloppy mistake, but exactly the kind 
of bone-headed error I make all the time. 

I'm not showing you a screenshot of this program, because nothing happens. 
Likewise, I don't show you a screenshot of the one in the next section 
because it doesn't do anything useful either. 



Managing the obsessive loop 
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The other kind of bad-natured loop is the opposite of the reluctant loop, 
described in the preceding section. This one starts up just fine, but never 
goes away! 

The following code illustrates an endless loop: 

<script type = "text/javascript"> 
//< ! [CDATA [ 

//from endless.html 

// Warning: this program has a deliberate 
// error! You will have to stop the browser 
// to end the loop. 
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i = 0; 
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alert ( j ) ; 
} // end while 

//] ]> 
</script> 

If you decide to run endless . html, be aware that it will not work properly. 
What's worse, the only way to stop it will be to kill your browser through the 
task manager. In the upcoming section "Catching Logic Errors," I show you 
how to run such code in a safe environment so that you can figure out what's 
wrong with it. 

This code is just one example of the dreaded endless loop. Such a loop usu- 
ally has perfectly valid syntax, but some logic error prevents it from running 
properly. The logical error is usually one of the following: 

♦ The variable wasn't initialized properly. The initial value of the sentry 
is preventing the loop from beginning correctly. 

♦ The condition is checking for something that can't happen. Either the 
condition has a mistake in it, or something else is preventing it from 
triggering. 

♦ The sentry hasn't been updated inside the loop. If you simply forget to 
modify the sentry variable, you'll get an endless loop. If you modify the 
variable after the loop has completed, you get an endless loop. If you ask 
for input in the wrong format, you may also get a difficult-to-diagnose 
endless loop. 



Debugging \lour Code 

If you've been writing JavaScript code, you've also been encountering errors. 
It's part of a programmer's life. Loops are especially troublesome because 
they can cause problems even if the syntax is perfect. Fortunately, you can 
use some really great tricks to help track down pesky bugs. 

Letting Aptana help 

If you're writing your code with Aptana, you already have some great help 
available. It gives you the same syntax-highlighting and code-completion fea- 
tures as you had when writing XHTML and CSS. 

Also, Aptana can often spot JavaScript errors on the fly. Figure 3-5 shows a 
program with a deliberate error. 
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Figure 3-5: 

Aptana 
caught my 
error and 
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1 <!doctype html pdblic "-//w3c//dtd xhtml 1.0 Strict//EN" 

2 "http: //www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
c html lar. :="EK" ::: = "1::" ::r.L.:£="-tt.: : .vr3 . org/ 1 999 / xhtml " > 

4- <head> 

: <rneta http-eq-jiv="content-tj'pe" content=" text / xnl ; charset=utf 

G <title>broken.html</title> 
7i <script type = "text/ javascript"> 

3 //from broken.html 

9 //note this code contains deliberate errors! 

//it is meant for debugging practice 

//<! [CDATA[ 
debugger; 

if<i == ii 

alert ( "there 1 s an error here...") 



</script> 
</head> 
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Aptana notifies you of errors in your code with a few mechanisms: 

♦ The suspect code has a red squiggle underneath. Just like a word-pro- 
cessing spell-checker. 

♦ A red circle indicates the troublesome line. You can scan the margin to 
quickly see where the errors are. 

♦ The validation pane summarizes all errors. You can see the errors and 
the line number for each. Double-click an error to be taken to that spot 
in the code. 

♦ You can hover over an error to get more help. Hover the mouse over 
an error to get a summary of the error. 

Aptana can catch some errors, but it's most useful at preventing errors with 
the automatic indentation and code assist features. (In the section "Using 
the Aptana Debug Mode," later in this chapter, I show how to use Aptana's 
powerful debug mode.) 

bebugging JavaScript on Internet Explorer 

Internet Explorer has unpredictable behavior when it comes to JavaScript 
errors. IE6 will take you to some type of editor, but the editors changed over 
the years and are modified (without your knowledge or permission) when 
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you install new software. IE7 (at least by default) simply does nothing. You 
won't see an error or any indication that an error even occurred. (Denial — 
j/orite coping mechanism.) 



You can force IE to give you a little bit of help, though. All you have to do is 
choose ToolsOInternet Options and then click the Advanced tab. You see a 
dialog box that looks like Figure 3-6. 

In the dialog box, select Display a Notification about Every Script Error. 
Leave all the other settings alone for now. (Yep, we're going to keep script 
debugging disabled, because it doesn't work very well. I show you a better 
technique in the section called "Finding Errors in Firefox.") 

Now when you reload broken . html in Internet Explorer, you'll see some- 
thing like Figure 3-7. 

This message is actually good news, because at least you know what the 
problem is, and you've got some kind of clue how to fix it. In this particular 
case, the error message is pretty useful. Sometimes that's the case, and 
sometimes the error messages seem to have been written by aliens. 



Figure 3-6: 

This dialog 
box allows 
you to get 
error 

warnings in 

Internet 

Explorer. 
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Figure 3-7: 
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see an error 
message. 
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Be sure to have the error notification turned on in IE so that you know about 
errors right away. Of course, you also need to check your code in Firefox, 
which has tons of great tools for checking out your code. 

Finding errors in Firefox 

Firefox has somewhat better error-handling than IE by default, and you can 
use add-ons to turn it into a debugging machine. At its default setting, error 
notification is minimal. If you suspect JavaScript errors, open up the Java 
Script Errors window by choosing ToolsOError Console or by typing javascript: 
in the location bar. Figure 3-8 shows the error console after running broken . 
html. 
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I generally find the error messages in the Firefox console more helpful than 
the ones provided by IE. 

The error console doesn't automatically clear itself when you load a new 
page. When you open it, it may still contain a bunch of old error messages. 
Be sure to clear the history (with the error console's clear button) and 
refresh your page to see exactly what errors are happening on this page. 
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Finding Errors With Firebug 

One of the best things about Firefox is the add-on architecture. Some really 
clever people have created very useful add-ons that add wonderful function- 
ality. Firebug is one example. This add-on (available on the CD-ROM or at 

https : / /addons .mozilla . org/en-US/f iref ox/addon/1843) adds 
tremendously to your editing bag of tricks. 

Firebug is useful for HTML and CSS editing, but it really comes into its own 
when you're trying to debug JavaScript code. (For more on Firebug, see 
Book I, Chapter 3.) 

When Firebug is active, it displays a little icon at the bottom of the browser 
window. If it identifies any JavaScript errors, a red error icon appear. Click this 
icon, and the Firebug window appears, describing the problem. Figure 3-9 shows 
how it works. 

If you click the offending code snippet, you can see it in context — especially 
useful when the error isn't on the indicated line. Generally, if I'm doing any 
tricky JavaScript, I turn on Firebug on to catch any problems. 
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Figure 3-9: 
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Catching Loqlc Errors 



The dramatic kind of error you see in broken . html is actually easy to fix. It 
crashes the browser at a particular part of the code, so you get a good idea 
what went wrong. Crashes usually result in error messages, which generally 
give some kind of clue about what went wrong. Most of the time, it's a prob- 
lem with syntax. You spelled something wrong, forgot some punctuation, or 
did something else that's pretty easy to fix once you spot it. This type of 
error is called a syntax error. 

Loops and branches often cause a more sinister kind of problem, called a 
logical error. Logical errors happen when your code doesn't have any syntax 
problems, but it's still not doing what you want. These errors can be much 
harder to pin down, because you don't get as much information. 

Of course, if you have the right tools, you can eventually track down even 
the trickiest bugs. The secret is to see exactly what's going on inside your 
variables — stuff the user usually doesn't see. 
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Logging to the console With Firebug 

|Firebug has another nifty trick. It allows you to send quick messages to the 
1 [ Q JTj rj BY^fg console. Take a look at log . html: 



<script type = "text/javascript"> 
//<! [CDATA [ 
// from log. html 

// note this program requires firebug on firefox 

Console . debug ( ) ; 

for (i = 1; i <= 5; i++) { 

console . log (i) ; 
} // end for loop 

//another loop with a fancier output 
for (i = 1; i <= 5; i++) { 

console . log (" i is now %d.", i) ; 

} 

console. info ( "This is info"); 
console. warn( "This is a warning"); 
console. error ( "This is an error"); 

//] ]> 
</script> 



This code is special because it contains several references to the console 
object. This object is available only to Firefox browsers with the FireBug 
extension installed. When you run the program with Firebug and look at the 
console tab, you see something like Figure 3-10. 

The console object allows you to write special messages that only the pro- 
grammer in the console sees. This ability is a great way to test your code 
and see what's going on, especially if things aren't working like you want. 

If you want to test your code in IE, there's a version of Firebug (called Firebug 
Lite) that works on other browsers. Check the Firebug main page (https : / / 
addons .mozilla . org/en-US/f iref ox/addon/1843) to download and 
install this tool if you want to use console commands on these browsers. 

Looking at console output 

Here's how the console object works: 

♦ The first loop prints the value of i to the console. Each time through 
the first loop, the console . log function prints the current value of i. 
This information is useful whenever the loop isn't working correctly. You 
can use the console . log ( ) method to print the value of any variable. 
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♦ The second loop demonstrates a more elaborate kind of printing. 

Sometimes you'll want to make clear exactly what value you're sending 
console. Firebug supports a special syntax called formatted printing 
plify this process. 



console . log (" i is now 



i) ; 




The text string " i is now %d" indicates what you want written in the 
console. The special character %d specifies that you'll be placing a 
numeric variable in this position. After the comma, you can indicate the 
variable you want inserted into the text. 

You can use other formatting characters as well. %s is for string, and %o is 
for object. If you're familiar with print f in C, you'll recognize this technique. 

♦ You can specify more urgent kinds of logging. If you want, you can use 
alternatives to the console . log to impart more urgency in your mes- 
sages. If you compare the code in log . html with the output of Figure 
3-10, you can see how info, warning, and error are formatted. 

When your program isn't working properly, try using console commands to 
describe exactly what's going on with each of your variables. This approach 
often helps you see problems and correct them. 



Figure 3-10: 
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When you get your program working properly, don't forget to take out the 
console commands! Either remove them or render them ineffective with 
Icpnwjent characters. The console commands will cause an error in any 
pjjp^er that doesn't have Firebug installed. Typically, your users will not have 
this extension. (Nor should they need it! You've debugged everything for them!) 

Using the Aptana bebuq Mode 

Traditional programming languages often feature a special debugging tool 
for fixing especially troubling problems. A typical debugger has these features: 

♦ The ability to pause a program as it's running. Logic errors are hard to 
catch because the program keeps on going. With a debugger, you can set 
a particular line as a breakpoint. When the debugger encounters the 
breakpoint, the program is in a pause mode. It isn't completely running, 
and it isn't completely stopped. 

♦ A mechanism for moving through the code a line at a time. You can 

normally step through code one line at a time so that you can see what's 
going on. 

♦ A way to view the values of all variables and expressions. Knowing 
what's happening in your variables is important. (For example, is a par- 
ticular variable changing when you think it should?) A debugger should 
let you look at the values of all its variables. 

♦ The ability to stop runaway processes. As soon as you start creating 
loops, you'll find yourself accidentally creating endless loops. (For more 
on endless loops, see the earlier section, "Managing the obsessive 
loop.") In a typical browser, the only way out of an endless loop is to kill 
the browser with the task manager (or process manager in some operat- 
ing systems). That step is a bit drastic. A debugger can let you stop a 
runaway loop without accessing the task manager. 

Debuggers are extremely handy, and they've been very common in most pro- 
gramming languages. JavaScript programmers haven't had much access to 
debugging tools in the past because the technical considerations of an 
embedded language made this difficult. 

Fortunately, Aptana has a wonderful debugging mode that works very well, 
and provides all those features. To test it, I wrote a program with a deliber- 
ate error that would be hard to find without a debugger: 

//<! [CDATA [ 

//from debug.html 

//has a deliberate error 




var i 
var j 



0 ; 
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console. log (i) ; 
■ } // end while 

DropBook$ 

</script> 

This code is another version of the endless . html program from the 
"Managing the obsessive loop" section earlier in this chapter. You may be 
able to see the problem right away. If not, you can see it as you run the 
debugger, which I describe how to do in the next sections. 



Aptana also supports the basic console . log ( ) function, but not the variations 
(variable interpolation, errors, and warnings). I used console . log ( ) for 
output in this program just to avoid jumping back and forth from the browser to 
the editor to handle dialog boxes. 

To step through a program using the Aptana debugger, begin by loading the 
file into the debugger. 



Adding, a breakpoint 

A JavaScript program can get much longer than the short examples I show in 
this book. You usually won't want to start the line-by-line debugging from the 
beginning, so you need to specify a breakpoint. When you run a program in 
debug mode, it runs at normal speed until it reaches a breakpoint and then it 
pauses so that you can control it more immediately. 

To set a breakpoint, right-click a line number in the code editor. 

Figure 3-1 1 shows me setting a breakpoint on line 12 of the debug . html code. 

Runninq the debuqqer 

The debugger requires you to run your program in a different way than you 
may be used to. Because your program is normally run by the browser (not 
Aptana), somehow you need a mechanism for passing information back from ap er 
the browser to Aptana. Here's what you need to do: 

/. Start the debugger. ? o 

o- o 

Click the debug icon, which looks like a little bug. g » 

_ 5' = 

2. Install the Aptana Firefox plugin automatically. <= °- 

When you debug a JavaScript program for the first time, Aptana asks 
permission to install an additional Firefox plugin. Click Yes to complete 
the installation. You only need to install this feature once. 
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Figure 3-11: 
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3. Switch to the debug perspective. 

Aptana pops up a message box asking whether you want to switch to the 
debug perspective. Click Yes to (temporarily) change Aptana to debug 
configuration. 

Using the debug perspective 

When Aptana is used for debugging, it introduces a new layout (called a per- 
spective in Aptana). This perspective changes the way the screen looks and 
optimizes the editor for debugging mode. Figure 3-12 shows the 
debug.html program in debug perspective. 

The debug perspective changes the editor in the following ways to emphasize 
debugging: 

♦ The code completion window is gone. This feature isn't needed when 
you're debugging, so it's removed. You need the screen space for other 
goodies. 

♦ The file management window is also missing. Likewise, you aren't 
doing a lot of file manipulation in debug mode, so this window is gone, 
too. (Don't worry; you get it back when you return to normal edit mode.) 
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Figure 3-12: 

Aptana 
looks a little 
different in 
debug 

perspective. 
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♦ You have a new debug window. This window shows your active 
threads. The most important thing about it is the buttons along the top. 

♦ You also have a breakpoint / variables window. This powerful new 
window describes the values of all your variables as the program is running. 

♦ Most of the other windows are the same. You still have the code 
window, console, and outline window, but they're rearranged a little dif- 
ferently than normal. Of course, you can adjust them if you want. 

Once you've got the debug mode running one time, a little debug icon 
appears in the upper-right of the Aptana interface. After this quick button is Chapter3 
available, you can use it to switch into debug mode. Use the Aptana button 
to move back to ordinary editing mode. 

o l— 

Examining the debug mode With a paused program I J 

When you run your code through the debugger, Aptana fires up a new "5- 2| 

instance of Firefox and loads your program into it. When your program is <a °- 

paused for debugging, you see a few new details, shown in Figure 3-13. 
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Figure 3-13: 
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<script type = "text/ javascript" 
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//from debug.html 
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var i = 0; 
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while (i <= 10) { 
console . log (i) ; 

} // end while 
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When your program is paused, you can see several important new indicators: 

♦ The debug window shows which script is active. Right now, your pro- 
grams have only one script, but later you'll have more. The thread 
window tells you which script currently has the processor's attention. 

♦ The buttons in the debug window are active. Hover the mouse over each 
button to see its ToolTips. I explain these buttons in the next section. 

♦ The Breakpoints window has more panes. In addition to the break- 
points and variables panes, you see some new panes, expressions 
and scripts. 

♦ The variables panel lets you see all the variables the page knows 
about. Even though this program contains only two explicitly defined 
variables, you can see a lot more than that. Every JavaScript program 
has a whole bunch of special variables built in. I explain how to use this 
panel in the next section ("Walking through your program"). 
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♦ The breakpoints panel allows you to manage your breakpoints. This 

panel is a good place for you to see all the breakpoints in your project. 
. I jfaa^can enable or disable a breakpoint from this panel. 



Tlfcrexpressions panel allows you to follow particular variables or 
expressions. It's an extremely powerful tool. I demonstrate its use in the 
section "Viewing expression data," later in this chapter. 

♦ The current line of code is highlighted. If you set a breakpoint on line 12, 
you'll see that line highlighted. (It may be difficult to see in Figure 3-13.) As 
you move through the code, this highlight moves in order to help you 
follow the logic. 

In some versions of Aptana, a message that starts TypeError : request . 
loadGroup has no properties appears sometimes when you're debugging 
a program. This error isn't in your code, and it doesn't seem to cause any 
problems. You can safely ignore this error. 



Here's the best part about the Aptana debug mode. You can run your pro- 
gram in super slow-mo, seeing every aspect of its behavior. Here's how: 

/. Click the Step Into button on the debug panel. 

It looks like a curved arrow pointing between two dots, or you can just 
use the F5 key. 

2. Look at the code. 

The highlighting has moved to the next line of code in your program 
(line 13). 

3. Mouse over the variables. 

Hover your mouse over the two variables (i and j) in your code. You 
see a dialog box that describes the current value of each variable. 

k. Use the Step Into button a few more times. 

Watch as the highlight moves through the program, looping. 

5. Check the variables again. 

Take another look at the variables after a few times through the loop, 
and you'll begin to see what's wrong with this code: j is increasing, but 
i is still stuck at zero. 

6. Stop the debug session. 

If you think you understand the problem, you can stop the debug ses- 
sion with the red square terminate button. (You'll need to do that in 
this program, because it's an endless loop. It will never end on its own.) 
Aptana then closes down the generated Firefox instance. 
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\\V ^ t ' le debugger isn't acting properly, be sure you've set a breakpoint. If you 
"""""" don't have a breakpoint, the program won't stop. Also, be sure that you've 
[he debug button to start the program. Using the run program or view- 
: page directly in the browser won't activate the debugger. 

Vieuring expression data 

The whole point of debugging is to find difficult problems. Usually, these prob- 
lems are variables that aren't doing what you expect. Aptana provides a 
Variables tab, which shows the value of all variables in a program, but it's sur- 
prisingly difficult to use. JavaScript programs come bundled with hundreds of 
variables. If you dig around, you can eventually find the i and j variables. 
(Scroll down in the variables panel to find them.) Every time you take another 
step, you have to scroll down again to see the values or mouse over the vari- 
ables in the code. 

Fortunately, Aptana provides a much easier way. Select a variable with the 
mouse and right-click. In the resulting menu, choose Watch. Figure 3-14 
shows the debugger after I've chosen to watch both variables and run 
through the loop a few times. 



Figure 3-14: 
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In this mode, you can see the exact values of the variables you've chosen to 
track. When the variable changes value, you can see it happen immediately. 



yl|^g^fession window has one more cool trick. You can use it to watch 
complex expressions, not just variables. In this program, you want to know 
why the loop isn't exiting. Highlight the condition (i <= 10) and add it to 
the watch expressions just as you did the variables. 

Now step through the program watching the variables and the condition. 
With all this information available to you, my coding mistake in the section 
"Using the Aptana Debug Mode" becomes obvious. I used the variable i in 
the condition, but I never changed it inside the loop. Instead, I changed the 
value of j , which has nothing at all to do with the loop! 

Whenever you encounter a program that isn't doing what you want, fire up 
the debugger, watch the critical values, and step through the code a line at a 
time. This process often helps you find even the most difficult errors. 
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Chapter 4: Functions and Arrays 
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In This Chapter 

W Getting organized with functions 
Passing parameters into functions 
C* Returning values from functions 

V Functions and variable scope 

V Producing basic arrays 
Retrieving data from arrays 
Building a multidimensional array 

f 

■ t doesn't take long for your code to become complex. Soon enough, you'll 
< find yourself wanting to write more sophisticated programs. When things 
get larger, you need new kinds of organizational structures to handle the 
added complexity. 

You can bundle several lines of code into one container and give this new 
chunk of code a name: function. You can also take a whole bunch of variables, 
put them into a container, and give it a name. That's called an array. 

This chapter is about how to work with more code and more data without 
going crazy. 

Breaking Code into Functions 

Functions come in handy when you're making complex code easier to handle. 

Functions are a useful tool for controlling complexity. You can take a large 
complicated program and break it into several smaller pieces. Each piece 
stands alone and solves a specific part of the overall problem. 

You can think of each function as a miniature program. You can define variables 
in functions, put loops and branches in there, and do anything else you can do 
with a program. A program using functions is basically a program full of 
subprograms. 

Once you have functions defined, they're just like new JavaScript commands. 
In a sense, when you add functions, you're adding to JavaScript. 
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To explain functions better, think back to an old campfire song, "The Ants Go 
Marching." Figure 4-1 re-creates this classic song for you in JavaScript format, 
ay want to roast a marshmallow while you view this program.) 



Figure 4-1: 

Nothing 
reminds me 
of functions 
like a 
classic 
campfire 
song. 



[JavaScript Application] 




[JavaScript Application] 


■ The ants go marching l by 1 hurrah, hurrah 
1 * ' The ants go marching 1 by 1 hurrah, hurrah 
The ants go marching 1 by 1 
The little one stops to suck his thumb 


f The ants go marching 2 by 2 hurrah, hurrah 
/ * i The ants go marching 2 by 2 hurrah, hurrah 
The ants go marching 2 by 2 
The little one stops to be his shoe 


r ok j 


1 «' 1 









[JavaScript Application] 

• ...and they all go marching down 
i 1 ' ■ \ to the ground 
to get out 
of the rain. 

boom boom boom boom boom boom boom boom 



[JavaScript Application] 



...and they all go marching down 
to the ground 
to get out 
of the rain, 

boom boom boom boom boom boom boom boom 



If you're unfamiliar with this song, it simply recounts the story of a bunch of 
ants. The littlest one apparently has some sort of attention issues (but we 
love him anyway). During each verse, the little one gets distracted by some- 
thing that rhymes with the verse number. The real song typically has ten 
verses, but I'm just doing two for the demo. 

Thinking about structure 

Before you look at the code, think about the structure of the song, "The Ants 
Go Marching." Like many songs, it has two main parts. The chorus is a phrase 
repeated many times throughout the song. The song has several verses, which 
are similar to each other, but not quite identical. 

Think about the song sheet passed around the campfire. (I'm getting hungry 
for a S'more.) The chorus is usually listed only one time, and each verse is 
listed. Sometimes, you'll have a section somewhere on the song sheet that 
looks like the following: 

Verse 1 
Chorus 
Verse 2 
Chorus 

Musicians call this thing a road map, and that's a great name for it. A road 
map is a higher level view of how you'll progress through the song. In the 
road map, you don't worry about the details of the particular verse or chorus. 
The road map shows the big picture, and you can look at each verse or 
chorus for the details. 
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Buitdinq the antsFunction.htmt program 

look at the code for antsFunction . html and see how it reminds 
e song sheet for "The Ants Go Marching": 



<script type = "text/javascript"> 
//< ! [CDATA [ 

//from antsFunction.html 

function chorus ( ) { 

var text = "...and they all go marching down\n" ; 
text += "to the ground \n" ; 
text += "to get out \n" ; 
text += "of the rain. \n" ; 
text += " \n" ; 

text += "boom boom boom boom boom boom boom boom \n"; 
alert ( text) ; 
} / / end chorus 

function versel ( ) { 

var text = "The ants go marching 1 by 1 hurrah, hurrah \n" 

text += "The ants go marching 1 by 1 hurrah, hurrah \n" ; 

text += "The ants go marching 1 by 1 \n"; 

text += " The little one stops to suck his thumb \n"; 

alert (text) ; 
} // end versel 

function verse2 ( ) { 

var text = "The ants go marching 2 by 2 hurrah, hurrah \n" 

text += "The ants go marching 2 by 2 hurrah, hurrah \n" ; 

text += "The ants go marching 2 by 2 \n" ; 

text += " The little one stops to tie his shoe \n"; 

alert (text) ; 
} // end versel 

//main code 
versel ( ) 
chorus ( ) ; 
verse2 ( ) ; 
chorus ( ) 

//>]] 
</script> 

Book IV 

The program code breaks the parts of the song into the same pieces a song Chapter 4 
sheet does. Here are some interesting features of antsFunction . html: 

♦ I created a function called chorus ( ) . Functions are simply collections g 
of code lines with a name. > £ 

♦ All the code for the chorus goes into this function. Anything I want to 
do as part of printing the chorus goes into the chorus ( ) function. Later, 
when I want to print the chorus, I can just call the chorus ( ) function, 
and it will do all the code I stored there. 
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♦ Each verse has a function, too. I broke the code for each verse into its 
own function as well. 
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The main code is a road map. Once all the details are delegated to the 
functions, the main part of the code just controls the order in which 
ptfee functions are called. 

^retails are hidden in the functions. The main code handles the big 
picture. The details (how to print the chorus or verses) are hidden 
inside the functions. 



Passing Data into and out of Functions 

Functions are logically separated from the main program. This separation is 
a good thing because it prevents certain kinds of errors. However, sometimes 
you want to send information into a function. You may also want a function to 
return some type of value. The antsParam . html page rewrites the "The Ants 
Go Marching" song in a way that takes advantage of function input and output. 

<script type = "text/javascript"> 
//<! [ CDATA [ 
//from antsParam.html 

I don't provide a figure of this program because it looks just like ants 
Func t i on . py to the user. One advantage of functions is that I can improve 
the underlying behavior of a program without imposing a change in the user's 
experience. 

function chorus ( ) { 

var text = "...and they all go marching down\n" ; 
text += "to the ground \n" ; 
text += "to get out \n"; 
text += "of the rain. \n" ; 
text += 11 \n" ; 

text += "boom boom boom boom boom boom boom boom \n"; 
return text; 
} // end chorus 

function verse (verseNum) { 
var distraction = ""; 
if (verseNum == 1) { 

distraction = "suck his thumb."; 
} else if (verseNum == 2) { 

distraction = "tie his shoe."; 
} else { 

distraction = "I have no idea."; 

} 

var text = "The ants go marching "; 

text += verseNum + " by " + verseNum + " hurrah, hurrah \n" ; 
text += "The ants go marching "; 

text += verseNum + " by " + verseNum + " hurrah, hurrah \n" ; 
text += "The ants go marching "; 
text += verseNum + " by " + verseNum; 
text += " the little one stops to "; 
text += distraction; 
return text; 
} // end versel 
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//main code 
alert (verse (1) ) ; 
^^rt ( chorus ( ) ) ; 
^C% :t (verse (2) ) ; 
alert ( chorus ( ) ) ; 

//>]] 
</script> 

This code incorporates a couple of important new ideas. (The following list 
is just the overview; the specifics are coming in the following sections.) 

♦ These functions return a value. The functions no longer do their own 
alerts. Instead, they create a value and return it to the main program. 

♦ Only one verse function exists. Because the verses are all pretty similar, 
using only one verse function makes sense. This improved function 
needs to know what verse it's working on to handle the differences. 

Examining the main code 

The main code has been changed in one significant way. In the last program, the 
main code called the functions, which did all the work. This time, the functions 
don't actually do the output themselves. Instead, they collect information 
and pass it back to the main program. Inside the main code, each function is 
treated like a variable. 

You've actually seen this behavior. The prompt ( ) method returns a value. 
Now the chorus ( ) and verse ( ) methods also return values. You can do 
anything you want to this value, including printing it or comparing it to some 
other value. 

Separating the creation of data from its use as I've done here is a good idea. 
That way, you have more flexibility. Once a function creates some informa- 
tion, you can print it to the screen, store it on a Web page, put it in a data- 
base, or whatever. 

Looking at the chorus 

The chorus of "The Ants Go Marching" song program has been changed to 
return a value. Take another look at the chorus ( ) function to see what I mean. 

function chorus ( ) { 

var text = "...and they all go marching down\n" ; 
text += "to the ground \n" ; 
text += "to get out \n" ; 
text += "of the rain. \n" ; 
text += " \n" ; 

text += "boom boom boom boom boom boom boom boom \n"; 
return text; 
} // end chorus 
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Here's what changed: 

JJie purpose of the function has changed. The function is no longer 
^signed simply to output some value to the screen. Instead, it now pro- 
vides text to the main program, which can do whatever it wants with the 
results. 

♦ There's a variable called text. This variable contains all the text to be 
sent to the main program. (It contained all the text in the last program, 
but it's even more important now.) 

♦ The text variable is concatenated over several lines. I used string 
concatenation to build a complex value. Note the use of newlines (\n) to 
force carriage returns. 

♦ The return statement sends text back to the main program. When 
you want a function to return some value, simply use return followed 
by a value or variable. Note that return should be the last line of the 
function. 

Handling the Verses 

The verse ( ) function is quite interesting. 

♦ It can print more than one verse. 

♦ It takes input to determine which verse to print. 

♦ It modifies the verse based on the input. 

♦ It returns a value (just like chorus ( ) ). 

To make the verse so versatile, it must take input from the primary program 
and return output. 

Passing data to the i/erse () function 

First, notice that the verse ( ) function is always called with a value inside 
the parentheses. For example, the main program sets verse ( 1 ) to call the 
first verse, and verse ( 2 ) to invoke the second. The value inside the paren- 
theses is called an argument. 

The verse function must be designed to accept an argument. Look at the first 
line to see how I did it. 

function verse (verseNum) { 

In the function definition, I include a variable name. Inside the function, this 
variable is known as a parameter. (Don't get hung up on the terminology. People 
often use the terms parameter and argument interchangeably.) The important idea 
is that whenever the verse ( ) function is called, it automatically has a variable 
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called verseNum. Whatever argument you send to the verse ( ) 
function from the main program will become the value of the variable 
m inside the function. 



You can define a function with as many parameters as you want. Each parame- 
ter gives you the opportunity to send a piece of information to the function. 



determining the distraction 

If you know the verse number, you can determine what distracts "the little 
one" in the song. You can determine the distraction in a couple of ways, but 
a simple if / else if structure is sufficient for this example. 



var distraction = " " ; 
if {verseNum == 1){ 

distraction = "suck his thumb."; 
} else if (verseNum == 2){ 

distraction = "tie his shoe."; 
} else { 

distraction = "I have no idea."; 

} 



I initialized the variable distraction to be empty If verseNum is 1, set dis- 
traction to " suck his thumb . " If verseNum is 2, distraction should be 
"tie his shoe" . Any other value for verseNum is treated as an error by 
the else clause. 



^pi. sr^ If you're an experienced coder, you may be yelling at this code. It still isn't 
^ optimal. Fortunately, in the section "Building a basic array" later in this 

chapter, I show an even better solution for handling this particular situation 
with arrays. 

By the time this code segment is complete, verseNum and distraction 
both contain a legitimate value. 
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Once you know these variables, it's pretty easy to construct the output text: Chapter 4 



var text = "The ants go marching "; 

text += verseNum + " by " + verseNum h 

text += "The ants go marching "; 

text += verseNum + " by " + verseNum h 

text += "The ants go marching "; 

text += verseNum + " by " + verseNum; 

text += 11 the little one stops to " ; 
text += distraction; 
return text; 
} // end versel 



11 hurrah, hurrah \n" 
" hurrah, hurrah \n" 



03 
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A whole lotta' concatenating is going on, but it's essentially the same code as 
the original verse ( ) function. This one's just a lot more flexible because it 
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can handle any verse. (Well, if the function has been preloaded to under- 
stand how to handle the verseNum.) 
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A function is much like an independent mini-program. Any variable you 
create inside a function has meaning only inside that function. When the 
function is finished executing, its variables disappear! This setup is actually 
a really good thing. A major program will have hundreds of variables, and 
they can be difficult to keep track of. You can re-use a variable name without 
knowing it or have a value changed inadvertently. When you break your 
code into functions, each function has its own independent set of variables. 
You don't have to worry about whether the variables will cause problems 
elsewhere. 



Introducing local and global Variables 

You can also define variables at the main (script) level. These variables are 
global variables. A global variable is available at the main level and inside 
each function. A local variable (one defined inside a function) has meaning 
only inside the function. The concept of local versus global functions is 
sometimes referred to as scope. 

Local variables are kind of like local police. Local police have a limited geo- 
graphical jurisdiction, but they're very useful within that space. They know 
the neighborhood. Sometimes you'll encounter situations that cross local 
jurisdictions. This situation is the kind that requires a state trooper or the FBI. 
Local variables are local cops, and global variables are the FBI. 

In general, try to make as many of your variables local as possible. The only 
time you really need a global variable is when you want some information to 
be used in multiple functions. 

Examining Variable scope 

To understand the implications of variable scope, take a look at scope .html: 



<script type = " text/ javascript "> 
//<! [CDATA [ 
//from scope.html 
var globalVar = "I'm global!"; 

function myFunction() { 

var localVar = "I'm local"; 
console . log (localVar) ; 

} 



myFunction ( ) ; 



//] ]> 
</script> 
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This program defines two variables. In the main code, globalvar is defined, 
and localvar is defined inside a function. If you run the program in debug 
ile watching the variables, you can see how they behave. Figure 4-2 
at the program looks like early in the run. 




localvar doesn't have meaning until the function is called, so it remains 
undefined until the computer gets to that part of the code. Step ahead a few 
lines, and you see that localvar has a value, as shown in Figure 4-3. 

Be sure to use step into rather than step over for this example. When 
step over encounters a function, it runs the entire function as one line. If 
you want to look into the function and see what's happening inside it (as you 
do here), use step into. 

Note that globalVar still has a value (it's an FBI agent), and so does 
localvar because it's inside the function. 

If you move a few more steps, localvar no longer has a value when the 
function ends (see Figure 4-4). 

Variable scope is a good thing because it means you have to keep track of 
only global variables and the variables defined inside your current function. 
The other advantage of scope is the ability to reuse a variable name. You can 
have ten different functions all using the same variable name, and they won't 
interfere with each other because they're entirely different variables. 



Figure 4-2: 

globalVar is 
defined, but 
localVar is 
not. 
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//<! [CDATA [ 



//from scope.html 

var globalVar = "I'm global!"; 
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Figure 4-3: 

localVar has 
a value, 
because I'm 
inside the 
function. 
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Once again, 
localVar has 
no meaning. 
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ns are groups of code lines with a name, arrays are groups of vari- 
h a name. Arrays are similar to functions because they're used to 
manage complexity. An array is a special kind of variable. Use an array when- 
ever you want to work with a list of similar data types. 



The following code shows a basic demonstration of arrays: 



<script type = "text/javascript"> 
//<! [CDATA [ 
//from genres.html 



//creating an empty array 
var genre = new Array ( 5 ) ; 



//storing data in the array 
genre[0] = "flight simulation"; 
genretl] = "first-person shooters"; 
genre [2] = "driving"; 
genre[3] = "action"; 
genre [4] = "strategy"; 



//returning data from the array 

alert ("I like " + genre[4] + " games."); 



//]]> 
</script> 



The variable genre is a special variable because it contains many different 
values. In essence, it's a list of genres. The new array ( 5 ) construct creates 
space in memory for five variables, all named genre. 




Accessing array data 



Once you've specified an array, you can work with the individual elements using 
square brace syntax. Each element of the array is identified by an integer. The 
index usually begins with zero. 

genretO] = "flight simulation"; 

The preceding code means assign the text value " flight simulator " to 
the genre array variable at position 0. 

Most languages require all array elements to be the same type. JavaScript is 
very forgiving. You can combine all kinds of stuff in a JavaScript array. This 
flexibility can sometimes be useful, but be aware that this trick doesn't work 
in all languages. In general, I try to keep all the members of an array the 
same type. 
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Once you've got the data stored in the array, you can use the same square- 
bracket syntax to read the information. 
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The line 

alert ("I like " + genre [4] + " games."); 

find element 4 of the genre array, and include it in an output message. 
When genre .html is run, it shows Figure 4-5. 



Figure 4-5: 

This data 
came from 


[JavaScript Application] 




| I like strategy games. 




an array. 


[ OK ] 





Usinq arrays With (or loops 

The main reason to use arrays is for convenience. When you have a lot of 
information in an array, you can write code to work with the data quickly. 
Whenever you have an array of data, you commonly want to do something 
with each element in the array. Take a look at games . html to see how you 
can do so: 



<script type = "text/javascript"> 
//<! [CDATA [ 
/ / from games . html 



//pre-loading an array 

var gameList = new Array ( "Flight Gear", "Sauerbraten" , "Future Pinball", 
"Racer", "TORCS", "Orbiter", "Step Mania", "NetHack" , 
"Marathon", "Crimson Fields"); 



var text = " " ; 

for (i =0; i < gameList . length; i++) { 

text += "I love " + gameList [i] + "\n"; 
} // end for loop 
alert (text) ; 

//] ]> 
</script> 



Notice a couple of things in this code: 



♦ It features an array called gameList. This array contains the names of 
some of my favorite freeware games. 

♦ The array is preloaded with values. If you provide a list of values when 
creating an array, JavaScript simply preloads the array with the values 
you indicated. You don't need to specify the size of the array if you 
preload it. 
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♦ A for loop steps through the array. Arrays and for loops are natural 
companions. The for loop steps through each element of the array. 



array's length is used in the for loop condition. Rather than spec- 
g the value 10, 1 used the length property of the array in my for 
loop. This practice is good because the loop will automatically adjust to 
the size of the array if I add or remove elements. 



♦ Do something with each element. Because I goes from 0 to 9 (the array 
indices), I can easily print each value of the array. In this example, I 
simply add to an output string. 

♦ Note the newline characters. - \n combination is a special character. It 
tells JavaScript to add a carriage return, such as pressing the Enter key. 

When games .html runs, it looks like Figure 4-6. 

If you want to completely ruin your productivity, Google some of these game 
names. They're absolutely incredible, and every one of them is free. It's hard 
to beat that. See, even if you don't learn how to program in this book, you 
get something good out of it! 



Figure 4-6: 

Now I've got 
a list of 
games. 
Arrays and 
loops are 
fun! 



[JavaScript Application] 



I love Right Gear 
I love Sauerbraten 
I love Future Pinball 
I ItNC Racer 
I love TORCS 
I love Orbiter 
I love Steo Mania 
I love NetMack 
I love Marathon 
I love Crimson Fields 




Revisiting the ants song 

If you read the earlier sections, you had probably just gotten that marching 
ant song out of your head. Sorry. Take a look at the following variation, 
which uses arrays and loops to simplify the code even more! 

<script type = " text/ javascript"> 
//< ! [CDATA [ 
//from antsArray.html 

var distractionList = new Array("", "suck his thumb", "tie his shoe"); 

function chorus ( ) { 

var text = "...and they all go marching down\n" ; 
text += "to the ground \n" ; 
text += "to get out \n" ; 
text += "of the rain. \n" ; 
text += " \n" ; 

text += "boom boom boom boom boom boom boom boom \n"; 




return text; 
} // end chorus 
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iunction verse (verseNum) { 
//pull distraction from array 
var distraction = distractionList [verseNum] ; 



var text = "The ants go marching "; 

text += verseNum + " by " + verseNum + " hurrah, hurrah \n" ; 
text += "The ants go marching " ; 

text += verseNum + " by " + verseNum + " hurrah, hurrah \n" ; 
text += "The ants go marching " ; 
text += verseNum + " by 11 + verseNum; 
text += " the little one stops to " ; 
text += distraction; 
return text ; 
} // end versel 

//main code is now a loop 

for (verseNum = 1; verseNum < distractionList . length; verseNum++) { 

alert (verse (verseNum) ) ; 

alert (chorus ( ) ) ; 
} // end for loop 



This code is just a little different from the antsParam program shown in the 
section of this chapter called "Passing Data into and out of Functions." 

♦ It has an array called distractionList. This array is (despite the 
misleading name) a list of distractions. I made the first one (element zero) 
blank so that the verse numbers would line up properly. 

♦ The verse ( ) function looks up a distraction. Because distractions are 
now in an array, you can use the verseNum as an index to loop up a 
particular distraction. Compare this function to the verse ( ) function in 
antsParam. (This program can be found in the section "Passing data into 
and out of Functions." Although arrays require a little more planning than 
code structures, they can highly improve the readability of your code. 

♦ The main program is in a loop. I step through each element of the 
distractionList array, printing the appropriate verse and chorus. 

♦ The chorus ( ) function remains unchanged. You don't need to change 

chorus ( ) . 



Arrays are useful when working with lists of data. Sometimes you'll 
encounter data that's best imagined in a table. For example, what if you 
wanted to build a distance calculator that determines the distance between 
two cities? The original data might look like Table 4-1. 



//>]] 

</script> 
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Table 4-1 




Distance between Major Cities 






0) Indianapolis 


7 J NeW\/ork 


2) Tokyo 


3) London 


jljf^iS'polis 


0 




648 


6476 


4000 


1) New York 


648 




0 


6760 


3470 


2) Tokyo 


6476 




6760 


0 


5956 


3) London 


4000 




3470 


5956 


0 



Think about how you would use Table 4-1 to figure out a distance. If you 
wanted to travel from New York to London, for example, you'd pick out the 
New York row and the London column and figure out where they intersect. 
The data in that cell is the distance (3,470 miles). 

When you look up information in any kind of a table, you're actually working 
with a two-dimensional data structure — a fancy term, but it just means table. 
If you want to look something up in a table, you need two indices, one to 
determine the row, and another to determine the column. 

If this concept is difficult to grasp, think of the old game Battleship. The play- 
ing field is a grid of squares. You announce 1-5, meaning column I, row 5, and 
the opponent looks in that grid to discover that you've sunk his battleship. 
In programming, you typically use integers for both indices, but otherwise 
it's exactly the same as Battleship. Any time you have two-dimensional data, 
you'll access it with two indices. 

Often, we call the indices row and column to help you think of the structure 
as a table. Sometimes other names more clearly describe how the behavior 
works. Take a look at Figure 4-7, and you see that the distance . html pro- 
gram asks for two cities and returns a distance according to the data table. 

Yep, you can have three, four, or more dimension arrays in programming, but 
don't worry about that yet. (It may make your head explode.) Most of the 
time, one or two dimensions are all you need. 

This program is a touch longer than some of the others, so I break it into 
parts in the following sections for easy digestion. Be sure to look at the pro- 
gram in its entirety on the CD-ROM. 

Setting up the arrays 

The key to this program is the data organization. The first step is to set up 
two arrays. 
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<script type = "text/javascript"> 
//< ! [CDATA [ 
//from distance.html 
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Figure 4-7: 

It's a Tale of 
Two Cities. 
You even 
get the 
distance 
between 
them! 



JavaScript Application] 
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Please choose a city by typing a number; 
Indianapolis 
New York 
Tokyo 
London 



[JavaScript Application] 



Please choose a aty by typing a number: 

0) Indianapolis 

1) New York 

2) Tokyo 

3) London 



[JavaScript Application] 



The distance from Indianapolis :o Tokyo is 6476 miles. 



//cityName has the names of the cities 

cityName = new Array ( "Indianapolis" , "New York", "Tokyo", "London"); 
//create a 2-dimension array of distances 
distance = new Array ( 

new Array (0, 648, 6476, 4000), 

new Array (648, 0, 6760, 3470), 

new Array (6476, 6760, 0, 5956), 

new Array (4000, 3470, 5956, 0) 

) ; 

The first array is an ordinary single-dimension array of city names. I've been 
careful to always keep the cities in the same order, so whenever I refer to city 0, 
I'm talking about Indianapolis (my hometown) New York is always going to be 
at position 1, and so on. 

You have to be careful in your data design that you always keep things in the 
same order. Be sure to organize your data on paper before you type it into 
the computer, so you'll understand what value goes where. 

The cityNames array has two jobs. First, it reminds me what order all the cities 
will be in, and, second, it gives me an easy way to get a city name when I know 
an index. For example, I know that cityName [ 2 ] will always be " Tokyo " . 

The distance array is very interesting. If you squint at it a little bit, it looks 
a lot like Table 4-1, shown earlier in this chapter. That's because it is Table 4-1, 
just in a slightly different format. 
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distance is an array. JavaScript arrays can hold just about everything, 
including other arrays! That's what distance does. It holds an array of rows. 

ent of the distance array is another (unnamed) array holding all 
for that row. If you want to extract information from the array, you 
need two pieces of information. First, you need the row. Then because the row 
is an array, you need the column number within that array. So, distance [ 1 ] 
[3 ] means go to row one ("New York") of distance. Within that row go to 
element 3 ("London") and return the resulting value (3470). Cool, huh? 



Getting a city 



The program requires that you ask for two cities. You want the user to enter 
a city number, not a name, and you want to ask this question twice. Sounds 
like a good time for a function. 

function getCity(){ 

// presents a list of cities and gets a number corresponding to 
// the city name 

var theCity - ""; //will hold the city number 

var cityMenu = "Please choose a city by typing a number: \n" ; 
cityMenu += "0) Indianapolis \n"; 
cityMenu += "1) New York \n" ; 
cityMenu += "2) Tokyo \n" ; 
cityMenu += "3) London \n" ; 

theCity = prompt (cityMenu) ; 
return theCity; 
} // end getcity 

The getcity ( ) function prints up a little menu of city choices and asks for 
some input. It then returns that input. 




You can improve getcity ( ) in all kinds of ways. For one thing, maybe it 
should repeat until you get a valid number so that users can't type the city 
name or do something else crazy. I'll leave it simple for now. If you want to 
find out how to use user interface elements to help the user submit only 
valid input, skip ahead to Chapter 5 of this minibook. 

Creating a main ( ) function 

The main ( ) function handles most of the code for the program. 

function main ( ) { 
var output = " " ; 
var from = getCityO; 
var to = getcity (); 
var result = distance [from] [to] ; 
output = "The distance from " + cityName [from] ; 
output += " to " + cityName [to] ; 

result + " miles."; 



output += " is 
alert (output) ; 
// end main 
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The main ( ) function controls traffic. Here's what you do: 
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eate an output variable. 




e point of this function is to create some text output describing the dis- 
tance. I begin by creating a variable called output and setting its initial value 
to empty. 

2. Get the city of origin. 

Fortunately, you've got a really great function called getcity ( ) that 
handles all the details of getting a city in the right format. Call this func- 
tion and assign its value to the new variable from. 

3. Get the destination city. 

That getcity ( ) function sure is handy. Use it again to get the city 
number you'll call to. 

4. Get the distance. 

Because you know two indices, and you know they're in the right format, 
you can simply look them up in the table. Look up 
distance [from] [to] and store it in the variable result. 

5. Output the response. 

Use concatenation to build a suitable response string and send it to the user. 

6. Get city names from the cityNames array. 

The program uses numeric indices for the cities, but they don't mean 
anything to the user. Use the cityNames array to retrieve the two city 
names for the output. 

7. Run the mainO function. 

Only one line of code doesn't appear in a function. That line calls the 
main ( ) function and starts the whole thing up. 

I didn't actually write the program in the order I showed it to you in the pre- 
ceding steps. Sometimes it makes more sense to go "inside out." 1 actually 
created the data structure first (as an ordinary table on paper) and then con- 
structed the main ( ) function. This approach made it obvious that I needed 
a getcity ( ) function and gave me some clues about how getcity should 
work. (In other words, it should present a list of cities and prompt for a 
numerical input.) 
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m avaScript is fun and all, but it lives in Web browsers for a reason: to let 
f" you change Web pages. The best thing about JavaScript is how it helps 
you control the page. You can use JavaScript to read useful information from 
the user and to change the page on the fly. 

In the first few chapters of this minibook, I concentrate on JavaScript with- 
out worrying about the HTML. The HTML code in those programs was unim- 
portant, so I didn't include it in the code listings. This chapter is about how 
to integrate code with HTML, so now I incorporate the HTML as well as the 
JavaScript segments. Sometimes I still print code in separate blocks, so (as 
always) try to look at the code in its natural habitat, through your browser. 



Understanding the Document Object Model 

JavaScript programs usually live in the context of a Web page. The contents 
of the page are available to the JavaScript programs through a mechanism 
called the document object model (DOM). 

The DOM is a special set of complex variables that encapsulates the entire 
contents of the Web page. You can use JavaScript to read from the DOM and 
determine the status of an element. You can also modify a DOM variable and 
change the page from within JavaScript code. 

NaViqatinq the DOM 

The easiest way to get a feel for the DOM is to load up a page in Firefox and 
look at the Firebug window's DOM tab. I do just that in Figure 5-1. 
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Figure 5-1: 

Even a very 
simple page 
has a 
complex 
DOM. 
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When you look over the DOM of a simple page, you can easily get over- 
whelmed. You'll see a lot of variables listed. Technically, these variables are 
all elements of a special object called window. The window object has a 
huge number of sub-objects, all listed in the DOM view. Table 5-1 describes a 
few important window variables. 



Table 5-1 


Primary DOM Objects 


Variable 


Description Notes 


document 


Represents XHTML page Most commonly scripted element 


location 


Describes current URL Change location .href to move to a new 

page 


history 


A list of recently visited pages Access this to view previous pages 


status 


The browser status bar Change this to set a message in the 

status bar 



Changing DOM properties With Firebug 

To illustrate the power of the DOM, try this experiment in Firefox: 



/. Load any page. 
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It doesn't matter what page you work with. For this example, I use 
simple . html, a very basic page with only an <hl> header. 



le the Firebug extension. 

You can play with the DOM in many ways, but the Firebug extension is 
one of the easiest and most powerful tools for experimentation. 

3. Enable the DOM tab. 



You see a list of all the top-level variables. 

4. Scroll down until you see the status element. 
When you find the status element, double-click it. 

5. Type a message to yourself in the resulting dialog box and press Enter. 

6. Look at the bottom of the browser. 

The status bar at the bottom of the browser window should now contain 
your message. 

7. Experiment. 

Play around with the various elements in the DOM list. You can modify many 
of them. Try changing window . location . href to any URL and watch what 
happens. Don't worry; you can't permanently break anything here. 



Examining the document object 

If the window object is powerful, its offspring, the document, is even more 
amazing. (If you're unfamiliar with the window object, see the section 
"Navigating the DOM," earlier in this chapter.) 

Once again, the best way to get a feel for this thing is to do some exploring: 

/. Reload simple.html. 

If your previous experiments caused things to get really weird, you may 
have to restart Firefox. Be sure the Firebug extension displays the DOM tab. 

2. Find the document object. 

It's usually the second object in the window list. When you select this 
object, it expands, showing a huge number of child elements. 

3. Look for the document . body. 

Somewhere in the document you'll see the body. Select this object to 
see what you discover. 

4. Find the document .body, style. 

The document object has a body object, which has a body object, which 
has a style. Will it never end? 
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5. Look through the style elements. 

Some styles will be unfamiliar, but keep going, and you'll probably see 
>me old friends. 



6. Double-click backgroundColor. 

Each CSS style attribute has a matching (but not quite identical) coun- 
terpart in the DOM. Wow. Type a new color and see what happens. 

7. Marvel at your cleverness. 

You can navigate the DOM to make all kinds of changes in the page. If 
you can manipulate something here, you can write code to do it, too. 

If you're lost here, Figure 5-2 shows me modifying the backgroundColor of 
the style of the body of the document (on a wing on a bird on a branch on a 
tree in a hole in the ground). A figure can't really do this justice, though. You 
have to experiment for yourself. But don't be overwhelmed. You don't really 
need to understand all of these details, just know they exist. 




Figure 5-2: 

Firebug lets 
me modify 
the DOM of 
my page 
directly. 
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g Firebug to trick out your Web page is geeky and all, but why 
u care? The whole purpose of the DOM is to provide JavaScript 
magical access to all the inner workings of your page. 



Getting the blues, JaVaScript-st^ie 

It all gets fun when you start to write JavaScript code to access the DOM. 
Take a look at blue . html in Figure 5-3. 

The page has white text on a blue background, but there's no CSS! Instead, it 
has a small script that changes the DOM directly, controlling the page colors 
through code. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv=" content-type" content="text/xml; charset=utf -8 " /> 
<title>blue .html</title> 



</head> 
<body> 

<hl>I've got the JavaScript Blues</hl> 
<script type = "text/javascript"> 
//< ! [CDATA [ 



lue.html - Mozilia Firefox 
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// use javascript to set the colors 
document .body . style . color = "white"; 
ocument .body . style .backgroundColor = "blue" 



/] ]> 
</script> 
</body> 
</html> 




Writing JavaScript code to change colors 

The page shown in Figure 5-3 is pretty simple, but it has a few features not 
found in Chapters 1 through 4 of this minibook. 

♦ It has no CSS. A form of CSS is dynamically created through the code. 

♦ The script is in the body. I can't place this particular script in the 
header because it refers to the body. 

When the browser first sees the script, there must be a body for the text 
to change. If I put the script in the head, no body exists when the browser 
reads the code, so it gets confused. If I place the script in the body, there 
is a body, so the script can change it. (It's really okay if you don't get this 
discussion. This example is probably the only time you'll see this trick 
because I show a better way in the next example.) 

♦ Use a DOM reference to change the style colors. That long trail of 
breadcrumbs syntax takes you all the way from the document through 
the body to the style and finally the color. It's tedious but thorough. 

♦ Set the foreground color to white. You can change the color property 
to any valid CSS color value (a color name or a hex value). It's just like 
CSS, because you are affecting the CSS. 

♦ Set the background color to blue. Again, this adjustment is just like 
setting CSS. 



Shouldn't it be background-color? 



If you've dug through the DOM style elements, 
you'll notice some interesting things. Many of 
the element names are familiar but not quite 
identical, background-color becomes 
backgroundColor and font-weight 
becomes f ontweight. CSS uses dashes to 
indicate word breaks, and the DOM combines 



words and uses capitalization for clarity. You'll 
find all your old favorite CSS elements, but the 
names change according to this very pre- 
dictable formula. Still, if you're ever confused, 
just use the Firebug DOM inspectorto lookover 
various style elements. 
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there's no good reason to write code like blue . html, which I dis- 
e section "Harnessing the DOM through JavaScript," earlier in this 
chapter. You will find that it's just as easy to build CSS as it is to write Java 
Script. The advantage comes when you use the DOM dynamically to change 
the page's behavior after it has finished loading. 



Figure 5-4 shows a page called "backgroundColors .html ". 

The page is set up with the default white background color. It has two buttons 
on it, which should change the body's background color. Click the Blue 
button, and you see that it works, as verified in Figure 5-5. 



Some really exciting things just happened. 



♦ The page has a form. For more information on form elements, refer to 
Book I, Chapter 7. 

♦ The button does something. Plain-old XHTML forms don't really do any- 
thing. You've got to write some kind of programming code to accomplish 
a task. This program does it. 
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The page is 
white. It has 
two buttons 
on it. I've 
gotta click 
Blue. 
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Figure 5-5: 

It turned 
blue! Joy! 




4- The page has a setColor ( ) function. The page has a function that 
takes a color name and applies it to the background style 

♦ Both buttons pass information to setColor. Both of the buttons call 
the setColor ( ) function, but they each pass a different color value. 
That's how the program knows what color to use when changing the 
background. 

Take a look at the code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>backgroundColors</title> 
<script type = " text/ javascript "> 
//<! [CDATA [ 

// from backgroundColors 

function changeColor (color) { 

document .body. style. backgroundColor = color; 
} // end changeColor 

//] ]> 
</script> 
</head> 
<body> 

<hl>Click a button to change the color</hl> 
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<form action = ""> 
<f ieldset> 

<input type = "button" 
value = "blue" 

onclick = "changeColor ( 1 blue ' ) " /> 



<input type = "button" 
value = "white" 

onclick = "changeColor ( 'white ') " /> 
</fieldset> 



</form> 
</body> 
</html> 



Most Web pages actually treat the XHTML page as the user interface and the 
JavaScript as the event-manipulation code that goes underneath. It makes 
sense, then, to look at the HTML code that acts as the playground first: 

♦ It contains a form. Note that the form's action attribute is still empty. You 
don't mess with that attribute until you work with the server in Book V. 

♦ The form has a f ieldset. The input elements need to be inside 
something, and a f ieldset seems like a pretty natural choice. 

♦ The page has two buttons. The two buttons on the page are nothing 
new, but they've never done anything before. 

♦ The buttons both have onclick attributes. This special attribute can 
accept one line of JavaScript code. Usually, that line calls a function, as I 
do in this example. 

♦ Each button calls the same function, but with a different parameter. 

Both buttons call changeColor ( ) , but one sends the value "blue" and 
the other "white" . 

♦ Presumably, changeColor changes a color. That's exactly what it will 
do. In fact, it changes the background color. 

Generally, I write the XHTML code before the script. As you can see, the form 
provides all kinds of useful information that can help me make the script. 
Specifically, I need to write a function called changeColor ( ) , and this function 
should take a color name as a parameter and change the background to the 
indicated color. With that kind of help, the function is half written! 

Embedding quotes Within quotes 

Take a careful look at the onclick lines in the code in the preceding section. 
You may not have noticed one important issue: 

onclick is an XHTML parameter, and its value must be encased in quotes. 
The parameter happens to be a function call, which sends a string value. 
String values must also be in quotes. This setup can become confusing if you 
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use double quotes everywhere because the browser has no way to know the 
quotes are nested. 

= "changeColor ( "white" ) 11 /> 

XHTML thinks the onclick parameter contains the value " changeColor ( " 
and it will have no idea what white" ) " is. 

Fortunately, JavaScript has an easy fix for this problem. If you want to embed 
a quote inside another quote, just switch to single quotes. The line is written 
with the parameter inside single quotes: 

onclick = "changeColor ( 'white ') " /> 

Writing the change Co tar function 

The changeColor ( ) function is pretty easy to write. 

<script type = "text/ javascript"> 
//<! [CDATA [ 

// from backgroundColors 

function changeColor (color ) { 

document .body. style .backgroundColor = color; 
} // end changeColor 

//]]> 
</script> 

It goes in the header area as normal. It's simply a function accepting one param- 
eter called color. The body's backgroundColor property is set to color. 

I can write JavaScript in the header that refers to the body because the 
header code is all in a function. The function is read before the body is in 
place, but it isn't activated until the user clicks the button. By this time, 
there is a body, and there's no problem. 

Managing Text Input ana* Output 

Perhaps the most intriguing application of the DOM is the ability to let the 
user communicate with the program through the Web page, without all those 
annoying dialog boxes. Figure 5-6 shows a page with a Web form containing 
two textboxes and a button. 

When you click the button, something exciting happens, demonstrated by 
Figure 5-7. 

Clearly, form-based input and output is preferable to the constant interruption 
of dialog boxes. 
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Figure 5-6: 

I've typed a 
name into 
the top 
textbox. 
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Introducing eVent-driVen proarammina 

Graphic user interfaces usually use a technique called event-driven program- 
The idea is simple. 

/. Create a user interface. 

In Web pages, the user interface is usually built of XHTML and CSS. 

2. Identify events the program should respond to. 

If you have a button, users will click it. (If you want to guarantee they 
click it, put the text Launch the Missiles on the button. I don't know why, 
but it always works.) Buttons almost always have events. Some other 
elements do, too. 

3. Write a function to respond to each event. 

For each event you want to test, write a function that does whatever 
needs to happen. 

4. Get information from form elements. 

Now you're accessing the contents of form elements to get information 
from the user. You need a mechanism for getting information from a text 
field and other form elements. 

5. Use form elements for output. 

For this simple example, I also use form elements for output. The output 
goes in a second text box, even though I don't intend the user to type 
any text there. 

Creating the XHTML form 

The first step in building a program that can manage text input and output is 
to create the XHTML framework. Here's the XHTML code: 

<title>textBoxes .html</title> 

<link rel = "stylesheet" 
type = "text/ess" 
href = " textBoxes . ess" /> 

</head> 
<body> 

<hl>Text Box Input and Output</hl> 
<form action = ""> 
<f ieldset> 

<label>Type your name: </label> 
< input type = "text" 

id = "txtName" /> 



<input type = "button" 

value = "click me" 
onclick = "sayHi()"/> 



Managing Text Input and Output fy25 



DropBooks 



<input type = "text" 

id = "txtOutput" /> 
eldset> 



</body> 
</html> 



As you look over the code, note a few important ideas: 



♦ The page uses external CSS. The CSS style is nice, but it's not important 
in the discussion here. It stays safely encapsulated in its own file. Of 
course, you're welcome to look it over or change it. 

♦ Most of the page is a form. All form elements must be inside a form. 

♦ A fieldset is used to contain form elements, input elements need to be 
inside some sort of block-level element, and a fieldset is a natural 
choice. 

4- There's a text field named txtName. This text field contains the name. I 
begin with the phrase txt to remind myself that this field is a textbox. 

♦ The second element is a button. You don't need to give the button an ID 
(as it won't be referred to in code), but it does have an onclick ( ) event. 

♦ The button's onclick event refers to a (yet undefined) function. In 

this example, it's named " sayHi ( ) " . 

♦ A second text box contains the greeting. This second textbox is called 
txtOutput because it's the text field meant for output. 

Once you've set up the HTML page, the function becomes pretty easy to 
write because you've already identified all the major constructs. You know 
you need a function called sayHi ( ) , and this function reads text from the 
txtName field and writes to the txtOutput field. 



Usinq GetElementByid to qet access to the paqe boouv 

XHTML is one thing, and JavaScript is another. You need some way to turn Chapter 5 

an HTML form element into something JavaScript can read. The magical _^ 

getElementByid ( ) method does exactly that. First, look at the first two £L 

lines of the sayHi ( ) function (defined in the header as usual). 5' 

o 

function sayHi ( ) { 

var txtName = document .getElementByid (" txtName" ) ; CD 
var txtOutput = document .getElementByid (" txtOutput ") ; "O 

to 

CD 

You can extract every element created in your Web page by digging through 
the DOM. In the old days, this approach is how we used to access form ele- 
ments. It was ugly and tedious. Modern browsers have the wonderful 
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getElementByid( ) function instead. This beauty searches through the 
DOM and returns a reference to an object with the requested ID. 



■ence is simply an indicator where the specified object is in memory. 
You can store a reference in a variable. Manipulating this variable manipu- 
lates the object it represents. If you want, you can think of it as making the 
textbox into a variable. 



Note that I call the variable txtName, just like the original textbox. This vari- 
able refers to the text field from the form, not the value of that text field. 
Once I have a reference to the text field object, I can use its methods and 
properties to extract data from it and send new values to it. 



Manipulating the text fields 

Once you have access to the text fields, you can manipulate the values of 
these fields with the value property: 



var name = txtName .value ; 

txtOutput .value = "Hi there, " + name + "!" 



Text fields (and, in fact, all input fields) have a value property. You can read 
this value as an ordinary string variable. You can also write to this property, 
and the text field will be updated on the fly. 



This code handles the data input and output: 

/. Create a variable for the name. 
This is an ordinary string variable. 

2. Copy the value of the textbox into the variable. 

Now that you have a variable representing the textbox, you can access 
its value property to get the value typed in by the user. 

3. Create a message for the user. 
Use ordinary string concatenation. 

It. Send the message to the output textbox. 

You can also write text to the value property, which changes the con- 
tents of the text field on the screen. 




Text fields always return string values (like prompts do). If you want to pull a 
numeric value from a text field, you may have to convert it with the 
parselnt ( ) or parseFloat ( ) functions. 
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ments are great for getting input from the user, but they're not ideal 
t. Placing the output in an editable field really doesn't make much 
sense. Changing the Web document is a much better approach. 




The DOM supports exactly such a technique. Most XHTML elements feature 
an innerHTML property. This property describes the HTML code inside the 
element. In most cases, it can be read from and written to. 

So what are the exceptions? Single-element tags (like <img> and <input>) 
don't contain any HTML, so obviously reading or changing their inner HTML 
doesn't make sense. Table elements can often be read from but not changed 
directly. 

Figure 5-8 shows a program with a basic form. 

This form doesn't have a form element for the output. Enter a name and click 
the button, and you see the results in Figure 5-9. 

Amazingly enough, this page can make changes to itself dynamically. It isn't 
simply changing the values of form fields, but changing the HTML. 



Figure 5-8: 

Wait, there's 
no output 
text field! 
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Figure 5-9: 

The page 
has 

changed 
itself. 
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Preparing the HTML framework 

To see how the page changes itself dynamically, begin by looking at the 
XHTML body for innerHTML . html: 

<body> 

<hl>Inner HTML Demo</hl> 
<form action = ""> 
<f ieldset> 

<label>Please type your name</label> 
<input type = "text" 

id = "txtName" /> 
<button type = "button" 

onclick = "sayHi()"> 
Click Me 
</button> 
</fieldset> 
</form> 

<div id = "divOutput"> 

Watch this space. 
</div> 
</body> 



The code body has a couple of interesting features: 



♦ The program has a form. The form is pretty standard. It has a text field 
for input and a button, but no output elements. 
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♦ The button will call a sayHi ( ) function. The page requires a function 
with this name. Presumably, it says hi somehow. 

e's a div for output. A div element in the main body is designated 
utput. 

♦ The div has an ID. The id attribute is often used for CSS styling, but the 
DOM can also use it. Any HTML elements that will be dynamically 
scripted should have an id field. 



Writing the JavaScript 

The JavaScript code for modifying innerHTML isn't very hard: 



<script type = "text/javascript"> 
//< ! [CDATA [ 
//from innerHTML.html 



function sayHi ( ) { 

txtName = document. getElementByld ( "txtName" ) ; 
divOutput = document. getElementByld ( "divOutput" ) ; 



name = txtName. value; 



divOutput . innerHTML = "<em>" + name + "<\/em>"; 
divOutput . innerHTML += " is a very nice name."; 

} 

//] ]> 
</script> 



The first step (as usual with Web forms) is to extract data from the input ele- 
ments. Note that I can create a variable representation of any DOM element, 
not just form elements. The divOutput variable is a JavaScript representa- 
tion of the DOM div. 



Fmdinq your innerHTML 

Like form elements, divs have other interesting properties you can modify. 
The innerHTML property allows you to change the HTML code displayed by 
the div. You can put any valid XHTML code you want inside the innerHTML 
property, even HTML tags. Be sure that you still follow the XHTML rules so 
that your code will be valid. 

Even with the cdata element in place, validators get confused by forward 
slashes (like the one in the </em> tag). Whenever you want to use a / char- 
acter in JavaScript strings, precede it with a backslash (<\ /em>). A back- 
slash helps the validator understand that you intend to place a slash 
character at the next position. 
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rou know how to work with text fields, you've mastered about half of 
•m elements. Several other form elements work exactly like text fields, 
including these: 



♦ Password fields obscure the user's input with asterisks, but preserve 
the text. 

♦ Hidden fields allow you to store information in a page without revealing 
it to the user. (They're used a little bit in client-side coding, but almost 
never in JavaScript.) 

♦ Text areas are a special variation of text boxes designed to handle multi- 
ple lines of input. 

Figure 5-10 is a page with all these elements available on the same form. 

When the user clicks the button, the contents of all the fields (even the pass- 
word and hidden fields) appear on the bottom of the page, as shown in 
Figure 5-11. 



Figure 5-10: 

Passwords, 
hidden 
fields, and 
text areas 
all lookthe 
same to 
JavaScript. 
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Figure 5-11: 

Now you 
can see 
what was in 
everything. 
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Building the form 

Here's the XHTML that generates the form shown in Figures 5-10 and 5-11: 

<body> 

<hl>Text Input Devices</hl> 
<form action = ""> 
<f ieldset> 

<label>Normal Text f ield</label> 
< input type = " text " 

id = "txtNormal" /> 
<label>Password f ield</label> 
<input type = "password" 

id = "pwd" /> Book IV 

<label>Hidden</label> Chapter 5 

<input type = "hidden" 

id = "hidden" _j 
value = "I can't tell you" /> EL. 
<textarea id = "txtArea" ™ 
rows = "10" CQ 
cols = "40"> o 
This is a big text area. ^ 
It can hold a lot of text. * 
</textarea> 5* 
<button type = "button" 

onclick = "processForm( ) "> 
Click Me 
</button> 
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| <div id = " output "> 
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The code may be familiar to you if you read about form elements in Book I, 
Chapter 7. A few things are worth noting for this example: 

♦ An ordinary text field appears, just for comparison purposes. It has an 

id so that it can be identified in the JavaScript. 

4- The next field is a password field. Passwords display asterisks, but 
store the actual text that was entered. This password has an id of pwd. 

4- The hidden field is a bit strange. You can use hidden fields to store 
information on the page without displaying that information to the user. 
Unlike the other kinds of text fields, the user can't modify a hidden field. 
(She usually doesn't even know it's there.) This hidden field has an id of 
secret and a value (" I can't tell you")- 

4 The text area has a different format. The input elements are all single- 
tag elements, but the textarea is designed to contain a large amount of 
text, so it has beginning and end tags. The text area's id is txtArea. 

4 A button starts all the fun. As usual, most of the elements just sit there 
gathering data, but the button has an onclick event associated with it, 
which calls a function. 

4 External CSS gussies it all up. The page has some minimal CSS to clean 
it up. The CSS isn't central to this discussion, so I don't reproduce it. 
Note that the page will potentially have a dl on it, so I have a CSS style 
for it, even though it doesn't appear by default. 

The password and hidden fields seem secure, but they aren't. Anybody who 
views the page source will be able to read the value of a hidden field, and 
passwords transmit their information in the clear. You really shouldn't be 
using Web technology (especially this kind) to transport nuclear launch 
codes or the secret to your special sauce. (Hmmm, maybe the secret sauce 
recipe is the launch code — sounds like a bad spy movie.) 

When I create a text field, I often suspend my rules on indentation because 
the text field preserves everything inside it, including any indentation. 

Writing the function 

After you build the form, all you need is a function. Here's the good news: 
JavaScript treats all these elements in exactly the same way! The way you 
handle a password, hidden field, or text area is identical to the technique 
for a regular text field (described under "Managing Text Input and Output," 
earlier in this chapter). Here's the code: 
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<script type = "text/javascript"> 
//<! [CDATA [ 




ifrom otherText.html 
^tion processForm( ) { 



//grab input from form 
var txtNormal = document .getElementByld ( 11 txtNormal" ) ; 
var pwd = document. getElementByld { "pwd" ) ; 
var hidden = document . getElementByld ( "hidden" ) ; 
var txtArea = document. getElementByld ( "txtArea" ) ; 

var normal = txtNormal. value; 
var password = pwd. value; 
var secret = hidden. value; 
var bigText = txtArea. value ; 

//create output 
var result = " " 



result 


+= 


"<dl> \n"; 


result 


+= 


" <dt>normal<\/dt> \n" ; 


result 


+= 


" <dd>" + normal + "<\/dd> \n 


result 


+= 


" \n"; 


result 


+= 


" <dt>password<\/dt> \n" ; 


result 


+= 


" <dd>" + password + "<\/dd> 


result 


+= 


" \n"; 


result 


+= 


" <dt>secret<\/dt> \n"; 


result 


+= 


" <dd>" + secret + "<\/dt> \n 


result 


+= 


\n"; 


result 


+= 


" <dt>big text<\/dt> \n"; 


result 
result 


+= 
+= 


<dd>" + bigText + "<\/dt> \ 
"<\/dl> \n"; 



var output = document. getElementByld ( "output" ) ; 
output . innerHTML = result; 

} // end function 



The function is a bit longer than the others in this chapter, but it follows exactly 
the same pattern: It extracts data from the fields, constructs a string for output, 
and writes that output to the innerHTML attribute of a div in the page. 

The code has nothing new, but it still has a few features you should consider: 

♦ Create a variable for each form element. Use the 

document . getElementByld mechanism. 

♦ Create a string variable containing the contents of each element. Don't 
forget: The getElementByld trick returns an object. You need to 
extract the value property to see what's inside the object. 

♦ Make a big string variable to manage the output. When output gets 
long and messy like this one, concatenate a big variable and then just 
output it in one swoop. 

♦ HTML is your friend. This output is a bit complex, but innerHTML is 
HTML, so you can use any HTML styles you want to format your code. 
The return string is actually a complete definition list. Whatever is 
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inside the text box is (in this case) reproduced as HTML text, so if I want 
carriage returns or formatting, I have to add them with code. 



't forget to escape the slashes. The validator gets confused by ending 
so add the backslash character to any ending tags occurring in 
JavaScript string variables. In other words, </dl> becomes <\ /dl>. 

♦ Newline characters (\n) clean up the output. If I were writing an ordi- 
nary definition list in HTML, I'd put each line on a new line. I try to make 
my programs write code just like I do, so I add newline characters every- 
where I'd add a carriage return in ordinary HTML. 



Understanding generated source 

When you run the program in the preceding section, your JavaScript code 
actually changes the page it lives on. The code that doesn't come from your 
server (but is created by your program) is sometimes called generated 
source. The generated code technique is powerful, but it can have a signifi- 
cant problem. Try this experiment to see what I mean: 

/. Reload the page. 

You want to view it without the form contents showing so that you can 
view the source. Everything will be as expected; the source code shows 
exactly what you wrote. 

2. Click the Click Me button. 

Your function runs, and the page changes. You clearly added HTML to 
the output div, because you can see the output right on the screen. 

3. View the source again. 

You'll be amazed. The output div is empty, even though you can clearly 
see that it has changed. 

4. Check generated code. 

Using the HTML validator extension or the W3 validator doesn't check 
for errors in your generated code. You have to check it yourself, but it's 
hard to see the code! 



Figure 5-12 illustrates this problem. 
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Figure 5-12: 

The ordinary 
view source 
command 
isn't 

showing the 
contents of 
the div! 
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Here's what's going on: The view source command (on most browsers) 
doesn't actually view the source of the page as it currently stands. It goes 
back to the server and retrieves the page, but displays it as source rather 
than rendered output. As a result, the view source command isn't useful 
for telling you how the page has changed dynamically. Likewise, the page 
validators check the page as it occurs on the server without taking into 
account things that may have happened dynamically. 

When you build regular Web pages, this approach isn't a problem because 
regular Web pages don't change. Dynamically generated pages can change 
on the fly, and the browser doesn't expect that. If you made a mistake in the 
HTML, you can't simply view the source to see what you did wrong in the 
code generated by your script. Fortunately, Firefox plugins give you two easy 
solutions: 

b 

3- 
a 
•a 

OS 
CO 
CD 
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The Web developer toolbar: This toolbar has a wonderful tool called 

view generated source available on the view sourcemenu.lt 
lows you to view the source code of the current page in its current 
te, including any code dynamically generated by your JavaScript. 



The Firebug window: Open this window when a page is open and 
browse (with the HTML tab) around your page. Firebug gives you an 
accurate view of the page contents even when they're changed dynami- 
cally, which can be extremely useful. 



These tools keep you sane when you're trying to figure out why your gener- 
ated code isn't acting right. (I wish I'd had them years ago. . . .) 

Figure 5-13 shows the Firebug toolbar with the dynamically generated con- 
tents showing. 



Figure 5-13: 

Firebug 
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etting input from the user is always nice, but sometimes users make 
mistakes. Whenever you can, you want to make the user's job easier 
and prevent certain kinds of mistakes. 

Fortunately, you can take advantage of several tools designed exactly for 
that purpose. In this chapter, you discover two main strategies for improv- 
ing user input: specialized input elements and pattern-matching. Together, 
these tools can help ensure that the data the user enters is useful and valid. 

Getting Input from a Brop-Bou/n List 

The most obvious way to ensure that the user enters something valid is to 
supply him with valid choices. The drop-down list is an obvious and easy 
way to do this, as you can see from Figure 6-1. 

The list-box approach has a lot of advantages over text field input: 

♦ The user can input with the mouse, which is faster and easier than typing. 

4- You shouldn't have any spelling errors because the user didn't type the 
response. 

♦ The user knows all the answers available because they're listed. 

♦ You can be sure the user gives you a valid answer because you supplied 
the possible responses. 

♦ User responses can be mapped to more complex values — for example, 
you can show the user Red and have the list box return the hex value 

#FF0000. 
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If you want to knowhow to build a list box with the XHTML select object, 
refer to Book I, Chapter 7. 

Building the form 

When you're creating a predefined list of choices, create the HTML form 
first, because it defines all the elements you'll need for the function. The 
code is a standard form: 

<body> 

<form action = ""> 

<hl>Please select a color</hl> 
<f ieldset> 

<select id = "selColor"> 

<option value = "#FFFFFF">White</option> 

<option value = "#FF0000">Red</option> 

<option value = "#FFCC00">Orange</option> 

<option value = "#FFFFOO">Yellow</option> 

<option value = "#00FF00">Green</option> 

<option value = "#0000FF">Blue</option> 

<option value = "#663366">Indigo</option> 

<option value = "#FFOOFF">Violet</option> 
</select> 



<input type = "button" 

value = "change color" 
onclick = "changeColor ( ) " /> 
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</fieldset> 
</form> 

DropBooks 

The select object's default behavior is to provide a drop-down list. The first 
element on the list is displayed, but when the user clicks the list, the other 
options appear. 



A select object that the code refers to should have an id field. 

In this and most examples in this chapter, I add CSS styling to clean up each 
form. Be sure to look over the styles if you want to see how I did it. 

The other element in the form is a button. When the user clicks the button, 
the changeColor ( ) function is triggered. 

Because the only element in this form is the select object, you may want to 
change the background color immediately without requiring a button click. 
You can do so by adding an event handler directly onto the select object: 

<select id - "selColor" 

onchange = "changeColor () "> 

The event handler causes the changeColor ( ) function to be triggered as 
soon as the user changes the select object's value. Typically, you'll forego 
the user clicking a button only when the select is the only element in the 
form. If the form includes several elements, processing doesn't usually 
happen until the user signals she's ready by clicking a button. 




Reading, the list box 

Fortunately, standard drop-down lists are quite easy to read. Here's the 
JavaScript code: 

<script type = "text/javascript"> Book IV 

//< ! [cdata [ Chapter 6 
// from dropdownList.html 

a 

function changeColor ( ) { 

var selColor = document .getElementByldf "selColor" ) ; — ■ 

var color = selColor .value; CO 

document .body. style. backgroundColor = color; ^ 

} / / end function ~ 

//]]> — 

</script> -o 
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As you can see, the process for reading the select object is much like working 
with a text-style field: 



eate a variable to represent the select object. The 

document . getElementByld ( ) trick works here just like it does for 
text fields. 

♦ Extract the value property of the select object. The value property 
of the select object reflects the value of the currently selected 
option. So, if the user has chosen Yellow, the value of selColor is 

" #FFFF0 0 " . 

♦ Set the document's background color. Use the DOM mechanism to set 
the body's background color to the chosen value. 
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You can use the select object in a more powerful way than the method I 
describe in the preceding section. Figure 6-2 shows a page with a multiple- 
selection list box. 

To make multiple selection work, you have to make a few changes to both 
the HTML and the JavaScript code. 



Figure 6-2: 

You can pick 
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choices 
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list. 
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Coding a multiple selection select object 

|""N ["^ ^y*-! 1 n^'fy the select code in two ways to make multiple selections: 

mmcate multiple selections are allowed. By default, select boxes 
have only one value. You'll need to set a switch to tell the browser to 
allow more than one item to be selected. 



♦ Make the mode a multiline select. The standard drop-down behavior 
doesn't make sense when you want multiple selections, because the 
user needs to see all the options at once. Most browsers automatically 
switch into a multiline mode, but you should control the process 
directly. 

The XHTML code for multiSelect . html is similar to the dropdownList 
page, described in the preceding section, but note a couple of changes. 

<body> 

<hl>Multiple Selections</hl> 
<form action = ""> 
<f ieldset> 
<label> 

Select the language (s) you know, 
(ctrl-click to select multiple lines) 
</label> 

<select id - " selLanguage" 

multiple = "multiple" 
size = "10"> 

<option value = "XHTML" >XHTML</option> 

<option value = "CSS">CSS</option> 

<option value = "JavaScript">JavaScript</option> 

<option value = "PHP">PHP</option> 

<option value = "MySQL">MySQL</option> 

<option value = " Java">Java</option> 

<option value = "VB.NET">VB.NET</option> 

<option value = "Python">Python</option> 

<option value = "Flash">Flash</option> 

<option value = "Perl">perl</option> 
</select> 

<button type = "button" 

onclick = "showChoices ( ) "> 

Submit 
</button> 
</fieldset> 
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</form> O 

CD 

<div id = " output "> 5' 

IB 

</div> ^ 

</body> 5; 

</html> — 

■a 
c 

The code isn't shocking, but it does have some important features: 



♦ The select object is called selLanguage. As usual, the form elements 
need an id attribute so that you can read it in the JavaScript. 
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Add the multiple attribute to your select object. This attribute tells 
the browser to accept multiple inputs using Shift+click (for contiguous 
•selections) or Ctrl+click (for more precise selection). 

HSet the size to 10. The size indicates the number of lines to be dis- 
played. I set the size to 10 because my list has ten options. 

♦ Make a button. With multiple selection, you probably won't want to trig- 
ger the action until the user has finished making selections. A separate 
button is the easiest way to make sure the code is triggered when you 
want it to happen. 

♦ Create an output div. This code holds the response. 



Writing the JavaScript code 




The JavaScript code for reading a multiple-selection list box is a bit different 
than the standard selection code described in the section "Reading the list 
box" earlier in this chapter. The value property only returns one value, but 
a multiple-selection list box often returns more than one result. 

The key is to recognize that a list of option objects inside a select object 
is really a kind of array. You can look more closely at the list of objects to see 
which ones are selected, which is essentially what the showChoices ( ) 
function does: 

<script type = "text/javascript"> 
//<! [CDATA [ 

//from multi-select.html 
function showChoices ( ) { 
//retrieve data 

var selLanguage = document . getElementByld ( "selLanguage" ) ; 
//set up output string 

var result = "<h2>Your Languages<\/h2>" ; 
result += "<ul> \n"; 

//step through options 

for (i =0; i < selLanguage . length; i++) { 
//examine current option 
currentOption = selLanguage [i] ; 

//print it if it has been selected 
if (currentOption. selected == true) { 

result += " <li>" + currentOption. value + "<\/li> \n" ; 
} // end if 
} // end for loop 

//finish off the list and print it out 
result += "<\/ul> \n"; 



output = document . getElementByld ( " output " ) ; 
output . innerHTML = result ; 
} // end showChoices 

//] ]> 
</script> 
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At first, the code seems intimidating, but if you break it down, it's not too tricky. 
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te a variable to represent the entire select object. 

standard document . getElementByld ( ) technique works fine. 

var selLanguage = document. getElementByld ( "selLanguage" ) ; 



2. Create a string variable to hold the output. 

When you're building complex HTML output, working with a string vari- 
able is much easier than directly writing code to the element. 

var result = "<h2>Your Languages<\/h2>" ; 

3. Build an unordered list to display the results. 

An unordered list is a good way to spit out the results, so I create one in 
my result variable. 

result += "<ul> \n" ; 

4. Step through selLanguage as if it were an array. 

Use a for loop to examine the list box line by line. Note that 
selLanguage has a length property like an array. 

for (i =0; i < selLanguage . length; i++){ 

5. Assign the current element to a temporary variable. 

The currentOption variable holds a reference to the each option ele- 
ment in the original select object as the loop progresses. 

currentOption = selLanguage [i] ; 

6. Check to see whether the current element has been selected. 

The object currentOption has a selected property that tells you 
whether the object has been highlighted by the user, selected is a 
Boolean property, so it's either true or false. 

if (currentOption. selected == true) { 

7. If the element has been selected, add an entry to the output list. 

If the user has highlighted this object, create an entry in the unordered 
list housed in the result variable. 

result += 11 <li>" + currentOption. value + "<\/li> \n"; 

8. Close up the list. 

Once the loop has finished cycling through all the objects, you can close 
up the unordered list you've been building. 

result += "<\/ul> \n" ; 
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9. Print results to the output div. 
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The output div's innerHTML property is a perfect place to print the 
ordered list. 



output = document. getElementByld ( "output" ) ; 
output . innerHTML = result; 




Something strange is going on here. The options of a select box act like an 
array. An unordered list is a lot like an array. Bingo! They are arrays, just in 
different forms. You can think of any listed data as an array. Sometimes you 
organize the data like a list (for display), sometimes like an array (for stor- 
age in memory), and sometimes it's a select group (for user input). Now 
you're starting to think like a programmer! 
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Check boxes fulfill another useful data input function. They're useful any 
time you have Boolean data. If some value can be true or false, a check box 
is a good tool. Figure 6-3 illustrates a page that responds to check boxes. 

Check boxes are independent of each other. Although they're often found in 
groups, any check box can be checked or unchecked regardless of the status 
of its neighbors. 



<3 checkB0xe5.html - Mozilla Firefox 



Figure 6-3: 

You can 
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Building the check box page 

|""N T«| build the check box page shown in Figure 6-3, start by looking at the HTML: 
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<hl>What do you want on your pizza?</hl> 
<form action = ""> 
<f ieldset> 

<input type = "checkbox" 

id = "chkPepperoni" 
value = "pepperoni" /> 
<label>Pepperoni</label> 



<input type = "checkbox" 
id = "chkMushroom" 
value = "mushrooms" /> 

<label>Mushrooms</label> 



<input type = "checkbox" 
id = "chkSausage" 
value = "sausage" /> 

<label>Sausage</label> 

<button type - "button" 

onclick = "order ()"> 
Order Pizza 
</button> 
</fieldset> 



</form> 

<h2>Your order :</h2> 
<div id = " output "> 



</div> 
</body> 



Each check box is an individual input element. Note that check box values 
aren't displayed. Instead, a label (or similar text) is usually placed after the 
check box. A button calls an order ( ) function. 



Responding to the check boxes 

Check boxes don't require a lot of care and feeding. Once you extract it, 
the check box has two critical properties: 

4- You can use the value property to store a value associated with the 
check box (just like you do with text fields in Chapter 5 of this minibook). 

♦ The checked property is a Boolean value, indicating whether the check 
box is currently checked or not. 

The code for the order ( ) function shows how it's done: 

<script type = "text/javascript"> 
//< ! [CDATA [ 

//from checkBoxes.html 
function order ( ) { 
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//get variables 

var chkPepperoni = document . getElementByld ( " chkPepperoni " ) ; 
var chkMushroom = document. getElementByld ( "chkMushroom" ) ; 
var chkSausage = document .getElementByld ( "chkSausage" ) ; 

var output = document. getElementByld { "output" ) ; 
var result = "<ul> \n" 

if (chkPepperoni . checked) { 

result += "<li>" + chkPepperoni .value + "<\/li> \n"; 
} // end if 

if (chkMushroom. checked) { 

result += "<li>" + chkMushroom . value + "<\/li> \n"; 
} // end if 

if ( chkSausage. checked) { 

result += "<li>" + chkSausage. value + "<\/li> \n"; 
} // end if 

result += "<\/ul> \n" 
output . innerHTML = result; 
} // end function 

//] ]> 
</script> 

For each check box: 

/. Determine whether the check box is checked. 

Use the checked property as a condition. 
2. If so, return the value property associated with the check box. 

Often, in practice, the value property is left out. The important thing is 
whether the check box is checked. If chkMushroom is checked, the user 
obviously wants mushrooms, so you may not need to explicitly store that 
data in the check box itself. 



Working With Radio Buttons 

Radio button groups appear pretty simple, but they're more complex than 
they seem. Figure 6-4 shows a page using radio button selection. 

The most important thing to remember about radio buttons is that they 
must be in groups. Each group of radio buttons has only one button active. 
The group should be set up so that one button is always active. 

You specify the radio button group in the XHTML code. Each element of the 
group can have an id (although the IDs aren't really necessary in this applica- 
tion). What's more important here is the name attribute. Look over the code, and 
you'll notice something interesting. All the radio buttons have the same name! 
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Figure 6-4: 

One and 
only one 
member of a 
radio group 
can be 
selected at 
once. 
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<body> 

<hl>With what weapon will you fight the dragon?</hl> 
<form action = ""> 
<f ieldset> 

< input type = "radio" 
name = "weapon" 
id = "radSpoon" 
value = "spoon" 
checked = "checked" /> 
< label >Spoon</ label > 



< input type = "radio" 
name = "weapon" 
id = "radFlower" 

value = "flower" /> Book IV 

<label>Flower</label> Chapter 6 

<input type = "radio" 

name = "weapon" & 
id = "radNoodle" 2" 
value = "wet noodle" /> <° 
<label>Wet Noodle</label> ^ 
<button type = "button" ~ 
onclick = " fight ()"> — 
fight the dragon 

</button> £ 
</fieldset> 
</form> 

<div id = " output "> 
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</div> 
</body> 
i</html> 
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a name attribute when everything else has an id seems a little odd, 
but you do it for a good reason. The name attribute is used to indicate the 
group of radio buttons. Because all the buttons in this group have the same 
name, they're related, and only one of them will be selected. 



The browser recognizes this behavior and automatically unselects the other 
buttons in the group whenever one is selected. 

I added a label to describe what each radio button means. 

You need to preset one of the radio buttons to true with the checked = 
"checked" attribute. If you fail to do so, you have to add code to account 
for the possibility that there is no answer at all. 

Interpreting radio buttons 

Getting information from a group of radio buttons requires a slightly differ- 
ent technique than most of the form elements. Unlike the select object, no 
container object can return a simple value. You also can't just go through 
every radio button on the page because you may have more than one group. 
(Imagine a page with a multiple-choice test.) 

This issue is where the name attribute comes in. Although ids must be 
unique, multiple elements on a page can have the same name. If they do, you 
can treat these elements as an array. 



Look over the code to see how it works: 



<script type = "text/javascript"> 
//<! [CDATA [ 

// from radioGroup.html 
function fight (){ 



var weapon = document . getElementsByName ( "weapon" ) ; 

for (i =0; i < weapon. length; i++) { 
currentWeapon = weapon [ i] ; 

if ( currentWeapon. checked) { 

var selectedWeapon = currentWeapon. value; 
} // end if 



} // end for 



var output = document. getElementById( "output" ) ; 
var response = "<h2>You defeated the dragon with a "; 
response += selectedWeapon + "<\/h2> \n" ; 
output . innerHTML = response; 
} // end function 
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//]]> 




lis*cWre looks much like all the other code in this chapter, but it has a 



sneaky difference: 

♦ It uses getElementsByName to retrieve an array of elements with this 
name. Now that you're comfortable with getElementByid, I throw a 
monkey wrench in the works. Note that it's plural — getElement 
sByName — because this tool is used to extract an array of elements. It 
returns an array of elements. (In this case, all the radio buttons in the 
weapon group.) 

♦ It treats the result as an array. The resulting variable (weapon in this 
example) is an array. As usual, the most common thing to do with arrays 
is process them with loops. Use a for loop to step through each ele- 
ment in the array. 

♦ Assign each element of the array to currentweapon. This variable 
holds a reference to the current radio button. 

♦ Check to see whether the current weapon is checked. The checked 

property indicates whether any radio button is currently checked. 

♦ If so, retain the value of the radio button. If the current radio button is 
checked, its value is the current value of the group, so store it in a vari- 
able for later use. 

♦ Output the results. You can now process the results as you would with 
data from any other resource. 



Having the right kinds of form elements can be helpful, but things can still go 
wrong. Sometimes, you have to let the user type things, and that information 
must be in a particular format. As an example, take a look at Figure 6-5. 

A mechanism that checks input from a form to see whether it's in the right 
format would be great. You can create this feature with string functions, but 
it can be really messy. Imagine how many if statements and string methods 
it would take to enforce the following rules on this page: 

♦ An entry must appear in each field. This one is reasonably easy — just 
check for non-null values. 

♦ The e-mail must be in a valid format. That is, it must consist of a few 
characters, an "at" sign (@), a few more characters, a period, and a 
domain name of two to four characters. That format would be a real pain 
to check for. 
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Figure 6-5: 

This page is 
a mess. No 
user name, 
and it's not a 
valid e-mail 
or phone 
number. 
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Phone Number |(12)DA(M3512 
(ddd) ddd-dddd 
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♦ The phone number must also be in a valid format. Phone numbers can 
appear in multiple formats, but assume that you require an area code in 
parentheses, followed by an optional space, followed by three digits, a 
dash, and four digits. All digits must be numeric. 

While you can enforce these rules, it would be extremely difficult to do so 
using ordinary string manipulation tools. 

JavaScript strings have a match method, which helps find a substring inside 
a larger string. This tool is good, but we're not simply looking for specific 
text, but patterns of text. For example, we want to know whether some- 
thing's an e-mail address (text, an @, more text, a period, and two to four 
more characters). 

Imagine how difficult that code would be to write; then take a look at the 
code for the validate.html page: 

<script type = "text/javascript"> 
function validate () { 
//get inputs 

name = document . getElementByld ( " txtName " ) . value ; 
email = document. getElementByld ( "txtEmail" ) .value; 
phone = document . getElementByld ( " txtPhone " ) . value ; 



//console . log ( "Name: " + name + ", email: " + email + ", Phone: " + 
phone) ; 
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II name must simply exist 
( name = = " " ) { 
alert ( "Please enter a name"); 
else { 

//name is OK, now check email 

//email must include an at sign 

if (email. match (" A . *\ . .{2,4}") == null) { 

alert ("That is not a valid email address"); 
} else { 
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/ /email is OK, now check phone # 

// regex is the only way to go here. . . . 

phoneRE = /\(\d{3}\) *\d{3 } -\d{4} / 
if (phone .match (phoneRE) == null) { 

alert ("That was not a valid phone number"); 
} else { 

//everything's ok... 

alert ( "processing form " ) ; 

} // end phone if 
} / / end email if 
} / / end name i f 
} // end function 



</script> 



I'm only showing the JavaScript code here to save space. Look on the 
CD-ROM to see how the HTML and CSS are written. 



The code isn't really all that difficult! 



♦ It extracts data from the form. It does so in the usual way. 

♦ The validation is a series of nested if statements. Look at the overall 
structure. The i f statements go three layers deep. 

♦ The name check is very simple. The only way it can go wrong is to have 
no name. 

♦ Don't check anything else if the name is wrong. If the name isn't right, 
you don't need to check the other things. 



♦ Check the phone number. Once again, the phone number check is 
simple except the match business, which is just as mysterious: 

A (\d{3}\) *\d{3}-\d{4}/ (seriously, who makes this stuff up?). 

♦ If everything worked, process the form. Usually, at this point, you call 
some sort of function to finish handling the form processing. 
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Check the e-mail address. This verification seems pretty simple until 
you look at the line that contains the email .match ( " A . *\ . . {2 , 4} " £ 
business. It looks like a cursing cartoonist in there. For now, just accept 2 
it as a magic incantation. The match will be true if it's an e-mail address <o 
or return null if it's not. 
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Frequently, you do validation in JavaScript before you pass information to a 
program on the server. This way, your server program already knows the 
valid by the time it gets there. 

Introducing regular expressions 

Of course, the secret of this program is to decode the mystical expressions 
used in the match statements. They aren't really strings at all, but very pow- 
erful text-manipulation techniques called regular expression parsing. Regular 
expressions have migrated from the UNIX world into many programming lan- 
guages, including JavaScript. 

A regular expression is a powerful mini-language for searching and replacing 
text patterns. Essentially, what it does is allow you to search for complex 
patterns and expressions. It's a weird-looking language, but it has a certain 
charm once you know how to read the arcane-looking expressions. 

Regular expressions are normally used with the string match ( ) method in 
JavaScript, but you can also use them with the replace ( ) method and a 
few other places. 

Table 6-1 summarizes the main operators in JavaScript regular expressions. 



Table 6-1 


Regula 


r 


Expression Operators in JavaScrip 


it 


Operator 


Description 




Sample Pattern Matches 


Doesn't Match 


. (period) 


Any single 
character excep 
newline 


t 


E 


\n 




Beginning of string 


~a 


Apple 


Banana 


$ 


End of string 






a$ 


Banana 


Apple 


[characters] 


Any of a list of 
characters in braces 


[abcABC] 


A 


D 


[char range] 


Any character 
in the range 






[a-zA-Z] 


F 


9 












\d 


Any single 
numerical digit 






\d\d\d-\d\d\d\d 


123-4567 


The-thing 


\b 


A word boundary 




\bthe\b 


The 


Theater 


+ 


One or more 
occurrences of the 
previous character 


\d+ 


1234 


Text 


* 


Zero or more 
occurrences of the 
previous character 


[a-zA-Z]d* 


B17,g 


7 


{digit} 


Repeat preceding 
character <//g/f times 


\d{3}-\d{4} 


123-4567 


999-99-9999 
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Operator Description 


Sample Pattern Matches 


Doesn't Match 


friiryrijjx} Repeat preceding 


.{2,4} 


Ca, com, info 


watermelon 


J 1^ character at least min 








' ' but not more than max 








times 








(pattern segment) Store results in pattern 
memory returned with 
code 




gig, wallow 


Bobby 



Don't memorize this table! I explain in the rest of this chapter exactly how it 
works. Keep Table 6-1 handy as a reference. 

To see how regular expressions work, take a look at regex . html in Figure 6-6. 

The top textbox accepts a regular expression, and the second text field contains 
text to examine. You can practice the examples in the following sections to see 
how regular expressions work. They're really quite useful once you get the 
hang of them. As you walk through the examples, try them out in this tester. 
(I've included it on the CD-ROM for you, but I don't reproduce the code here.) 
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regular 
expressions. 
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Using characters in regular expressions 

IThemain thing you do with a regular expression is search for text. Say that 
I \C) lj |"j IJ IJ i^iGork for the bigCorp company, and you ask for employee e-mail 

aaaresses. You can make a form that accepts only e-mail addresses with the 
term bigCorp in them by using the following code: 



if (email .match ( "bigCorp" )) { 

alert ( "match" ) ; 
} else { 

alert ( "no match" ) ; 
} // end if 



This match is the simplest type. I'm simply looking for the existence of the 
needle (bigCorp) in a haystack (the e-mail address stored in email). If the 
text bigCorp is found anywhere in the text, the match is true, and I can do 
what I want (usually process the form on the server). More often, you'll want 
to trap for an error and remind the user what needs to be fixed. 



Marking the beginning and end of the tine 

You may want to improve the search, because what you really want are 
addresses that end with "bigCorp . com" . You can put a special character 
inside the match string to indicate where the end of the line should be: 



if (email .match ( "bigCorp. com$ " ) ) { 

alert ( "match" ) ; 
} else { 

alert ( "no match" ) ; 
} // end if 



The dollar sign at the end of the match string indicates that this part of the 
text should occur at the end of the search string, so andy@bigCorp . com is 
a match, but not "bigCorp.com announces a new Web site." 

If you're already an ace with regular expressions, you know this example has 
a minor problem, but it's pretty picky. I explain it in the upcoming section 
"Working with special characters." For now, just appreciate that you can 
include the end of the string as a search parameter. 

Likewise, you can use the caret character ( A ) to indicate the beginning of a 
string. 

If you want to ensure that a text field contains only the phrase oogie 
boogie (and why wouldn't you?), you can tack on the beginning and ending 
markers. The code ^oogie boogie$ is a true match only if nothing else 
appears in the phrase. 
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Working with special characters 

i to ordinary text, you can use a bunch of special character sym- 
ore flexible matching: 

♦ Matching a character with the period: The most powerful character is 
the period (.), which represents a single character. Any single character 
except the newline (\n) matches against the period. A character that 
matches any character may seem silly but it's actually quite powerful. 
The expression b . g matches big, bag, and bug. In fact, it matches any 
phrase that contains b followed by any single character and then g, so 
bxg, b g, and b9g are also matches. 

♦ Using a character class: You can specify a list of characters in square 
braces, and JavaScript matches if any one of those characters matches. 
This list of characters is sometimes called a character class. For example, 
b [aeiou] g matches on bag, beg, big, bog, or bug. This method is a 
really quick way to check a lot of potential matches. 

You can also specify a character class with a range. [a-zA-z] checks all 
the letters. 

♦ Specifying digits: One of the most common tricks is to look for num- 
bers. The special character \d represents a number (0-9). You can 
check for a U.S. phone number (without the area code — yet) using a 
pattern that looks for three digits, a dash, and four digits: \d\d\d- 
\d\d\d\d. 

♦ Marking punctuation characters: You can tell that regular expressions use 
a lot of funky characters, such as periods and braces. What if you're 
searching for one of these characters? Just use a backslash to indicate that 
you're looking for the actual character and not using it as a modifier. For 
example, the e-mail address would be better searched with bigCorp\ . 
com, because it specifies there must be a period. If you don't use the back- 
slash, the regular expression tool interprets the period as "any character" 
and allows something like bigCorpucom. Use the backslash trick for most 
punctuation, such as parentheses, braces, periods, and slashes. 

If you want to include an area code with parentheses, just use back- 
slashes to indicate the parentheses: \ ( \d\d\d\ ) \d\d\d-\d\d\d\d. 

♦ Finding word boundaries: Sometimes you want to know whether some- 
thing is a word. Say that you're searching for the word "the" but you 
don't want a false positive on "breathe" or "theater." The \b character 
means "the edge of a word," so \bthe\b matches "the" but not words 
containing "the" inside them. 
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Conducting repetition operations 

11 the character modifiers refer to one particular character at a time, but 
times you want to deal with several characters at once. Several opera- 
an help you with this process. 

♦ Finding one or more elements: The plus sign (+) indicates "one or more" 
of the preceding character, so the pattern ab+c matches on abc, 
abbbbbbc, or abbbbbbbc, but not on ac (there must be at least one b) 
or on af c (it's gotta be b). 

♦ Matching zero or more elements: The asterisk means "zero or more" of 
the preceding character. Soi'm . * happy matches on 1 1 m happy 
(zero occurrences of any character between I ' m and happy). It also 
matches oni'm not happy (because characters appear in between). 

The . * combination is especially useful, because you can use it to 
improve matches like e-mail addresses: A . *@bigCorp\ . com$ does a 
pretty good job of matching e-mail addresses in a fictional company. 

♦ Specifying the number of matches: You can use braces ({}) to indicate 
the specific number of times the preceding character should be 
repeated. For example, you can rewrite a phone number pattern as 
\(\d{3}\) *\d{3}-\d{4}. This structure means "three digits in 
parentheses, followed by any number of spaces (zero or more), and then 
three digits, a dash, and four digits. Using this pattern, you can tell 
whether the user has entered the phone number in a valid format. 

You can also specify a minimum and maximum number of matches, so 
[aeiou] { 1 , 3 } means "at least one and no more than three vowels." 

Now you can improve the e-mail pattern so that it includes any number 
of characters, an @ sign, and ends with a period and two to four letters: 

A . *@. *\ . . {2 , 4}$, 



Working with pattern memory 

Sometimes you want to remember a piece of your pattern and reuse it. You 
can use parentheses to group a chunk of the pattern and remember it. For 
example, (foo) {2} doesn't match on foo, but it does on foofoo. It's the 
entire segment that's repeated twice. 

You can also refer to a stored pattern later in the expression. The pattern A 
( . ) . * \1$ matches any word that begins and ends with the same character. 
The \1 symbol represents the first pattern in the string, \2 represents the 
second, and so on. 
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After you've finished a pattern match, the remembered patterns are still avail- 
able in special variables. The variable $1 is the first, $2 is the second, and so 
an use this trick to look for HTML tags and report what tag was found: 
(.*)>. *<\/\l>$ and then print $1 to see what the tag was. 



There's much more to discover about regular expressions, but this basic 
overview should give you enough to write some powerful and useful patterns. 
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In This Chapter 

W Moving an object on the screen 
V Responding to keyboard input 
v* Reading mouse input 
W Running code repeatedly 

Bouncing off the walls 
v 0 Swapping images 

Reusing code 

Using external script files 

7 

m avaScript has a serious side, but it can be a lot of fun, too. You can easily 
J- use JavaScript to make things move, animate, and wiggle. In this chapter, 
you find out how to make your pages dance. Even if you aren't interested in 
animation, you can discover important ideas about how to design your 
pages and code more efficiently 

I know what you're thinking: You can use this stuff to make a really cool 
game. It's true. You can make games with JavaScript, but you eventually run 
into JavaScript's design limitations. I prefer Flash and Python as languages 
to learn game development. Now that you mention it, I've written other 
Wiley books on exactly these topics. See you there! (Check out Beginning 
Flash Game Programming For Dummies and Game Programming: The L Line 
for Python development.) 
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You may think you need Flash or Java to put animation in your pages, but 
that's not the only way. You can use JavaScript to create some pretty inter- 
esting motion effects. Take a look at Figure 7-1. 

Because this chapter is about animation, most of the pages feature motion. 
You really must see these pages in your browser to get the effect, as a static 
screen shot can't really do any of these programs justice. 

The general structure of this page provides a foundation for other kinds of 
animation: 
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♦ The HTML is pretty simple. The page really doesn't require much HTML 
code. It's a couple of divs and some buttons. 



e ball is in a special div called sprite. Game developers call the 
tie images that move around on the screen sprites, so I use the same term. 

♦ The sprite div has a local style. JavaScript animation requires a 
locally defined style. 

♦ The sprite div has absolute positioning. Because I'll be moving this 
thing around on the screen, it makes sense that it's absolutely positioned. 

♦ The code and CSS are as modular as possible. Things can get a little 
complicated when you start animating things, so throughout this chap- 
ter, I simplify as much as I can. The CSS styles are defined externally, and 
the JavaScript code is also imported. 

4- Code is designed to be reused. Many programs in this chapter are very 
similar to each other. To save effort, I've designed things so that I don't 
have to rewrite code if possible. 



& movement.html - Mozilla Firefox 



Figure 7-1: 

Click the 
buttons, and 
the ball 
moves. 
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Looking oi)er the HTML 

The HTML code for this program provides the basic foundation: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
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|head> 
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"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir=" ltr " xmlns="http : //www.w3 . org/ 1999 /xhtml "> 
head> 

http-equiv= " content -type" content =" text/xml ; charset=utf -8 " /> 
>movement . html < / 1 i t le> 



<link rel = "stylesheet" 
type = "text/ess" 
href = "movement. ess" /> 



<script type = "text/javascript" 

sre = "movement . js"> 
</script> 
</head> 



<body onload = "init()"> 

<hl>Click buttons to move ball</hl> 
<div id = " surface "> 
<div id = "sprite" 

style = "position: absolute; 
top : lOOpx; 
left: lOOpx; 
height: 25px; 
width: 25px; " > 
<img sre = "ball.gif" 
alt = "ball" /> 

</div> 
</div> 

<form action = " " 

id = " controls "> 
<f ieldset> 

<button type = "button" 

onclick = "moveSprite (-5 , 0)"> 

left 
</button> 

<button type = "button" 

onclick = "moveSprite (5 , 0) "> 

right 
</button> 
</fieldset> 
</form> 

<p id = " output "> 
x = 100, y = 100 

</p> 
</body> 
</html> 



You should notice a few interesting things about this code: 

♦ It has an external style sheet. Most of the CSS (the stuff that defines the 
surface and the forms) is moved off-stage into an external style sheet. 
You have to define some CSS locally but anything that can be moved 
away is. 

<link rel = "stylesheet" 
type = "text/ess" 
href = "movement . ess " /> 

♦ The JavaScript is also outsourced. The script tag has a sre attribute, 
which you can use to load JavaScript code from an external file. The 
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browser loads the specified file in and reads it as if it were directly in the 
code. (Note that external scripts still require a </script> tag.) This 
ogram gets its scripts from a file called movement . j s. 



<script type = "text/javascript" 

src = "movement . j s " > 
</script> 



♦ The body tag calls a method. In animation (and other advanced 

JavaScript), you commonly have some code you want to run right away. 
The body has an onload event. You can feed it the name of a function 
(just like you do with a button's onclick event). In this case, I want the 
function called init ( ) to run as soon as the body finishes loading into 
the computer's memory. 

<body onload = "init()"> 



♦ The yellow box is a div called surface. It isn't absolutely necessary 
but when you have something moving around on the screen, you want 
some kind of boundary so that the user knows where she can move. 

♦ A sprite div appears inside surface. This sprite is the thing that 
actually moves around. 



<div id = "sprite" 

style = "position: absolute; 
top: lOOpx; 
left: lOOpx; 
height: 25px; 
width: 25px; 11 > 
<img src = "ball.gif" 
alt = "ball" /> 

</div> 



♦ The sprite div has a local style. Your code can change only styles that 
have been defined locally. The sprite div has a local style specifying 
absolute position, left, and top properties. 

♦ It has buttons in a form. This particular program uses form buttons to 
discern the user's intent. Those buttons are in a form. 

<button type = "button" 

onclick = "moveSprite ( -5 , 0)"> 

left 
</button> 



♦ Each button calls the moveSprite ( ) method. The moveSprite ( ) 

method is defined in the movement . j s file. It accepts two parameters: 
dx determines how much the sprite should move in the x (side to side) 
axis, and dy controls how much the sprite will move in the y (vertical) axis. 



Getting an oiJeYiJieu) of the JavaScript 

The following programming concepts improve programmer efficiency, which 
is good as the JavaScript code becomes more complex: 
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♦ Move code to an external file. As with CSS code, when the JavaScript 
starts to get complex, it's a good idea to move it to its own file, so it's 
r to manage. 



psulate code in functions. Rather than writing a long, complicated 
function, try to break the code into smaller functions that solve individ- 
ual problems. If you design these functions well, your code is easier to 
write, understand, and recycle. 

Create a few global variables. You can reuse a few key variables 
throughout your code. Create global variables for these key items, but 
don't make anything global that doesn't need to be. 

Define constants for clarity. Sometimes having a few key values stored 
in special variables is handy. I've created some constants to help me 
track the boundary of the visual surface. 



Creating global Variables 

The first part of this document simply defines the global variables I use 
throughout the program: 



/ /movement . j s 
//global variables 
var sprite; 

var x, y; //position variables 



/ /constants 
var MIN_X = 15; 
var MAX_X = 365; 
var MIN_Y = 85; 
var MAX_Y = 43 5; 




The movement program has three main global variables. 

♦ sprite represents the div that moves around on the screen. 

♦ x is the x (horizontal) position of the sprite. 

♦ y is the y (vertical) position of the sprite. 

You don't need to give values to global variables right away, but you should 
define them outside any functions so that their values are available to all 
functions. (See Chapter 4 in this minibook for more about functions and 
variable scope.) 

Note that in computer graphics, the y axis works differently than it does in math. 
Zero is the top of the screen, and y values increase as you move down the page. 
(This increase happens because it models the top-to-bottom pattern of most 
display devices.) 
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This program also features some special constants. A constant is a variable 
(usually global) whose value isn't intended to change as the program runs. 
,ants are almost always used to add clarity 




Through experimentation, I found that the ball's x value should never be smaller 
than 15 or larger than 365. By defining special constants with these values, I can 
make it clear what these values represent. (See the section called "Checking the 
boundaries" later in this chapter to see how this feature really works.) 

You traditionally put constants entirely in uppercase letters. Many languages 
have special modifiers for creating constants, but JavaScript doesn't. If you 
want something to be a constant, just make a variable with an uppercase name 
and treat it as a constant. (Don't change it during the run of the program.) 

Initializing 

The init ( ) function is small but mighty: 



function init ( ) { 

sprite = document. getElementByld ( "sprite" ) ; 
} // end init 



It does a simple but important job: loading up the sprite div and storing it 
into a variable named sprite. Because sprite is a global variable, all other 
functions have access to the sprite variable and are able to manipulate it. 

You often use the init ( ) function to initialize key variables in your pro- 
grams. You also can use this function to set up more advanced event han- 
dlers, as you see in the animation sections of this chapter. 



Moving the sprite 

Of course, the most interesting function in the program is the one that 
moves sprites around the screen. Take a look at the following code, which I 
break down for you: 

function moveSprite (dx, dy) { 

var surface = document. getElementByld ( "surface" ) ; 

x = parselnt (sprite . style . left ) ; 
y = parselnt (sprite . style . top) ; 

x += dx; 
y += dy; 

checkBounds ( ) ; 

// move ball to new position 
sprite . style . left = x + "px" ; 
sprite . style . top = y + "px" ; 



//describe position 
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var output = document. getElementByld ( "output" ) ; 
output . innerHTML = "x: " + x + 11 , y: " + y; 
} |/ end MoveSprite 
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#lleYuV*etion works essentially by determining how much the sprite should 
be moved in x and y and then manipulating the left and top properties of 
its style. Here's what happens: 

/. Accept dx and dy as parameters. 

The function expects two parameters: dx stands for delta-x, and dy is 
delta-y. (You can read them difference in x and difference in y if you 
prefer, but I like sounding like a NASA scientist.) These parameters tell 
how much the sprite should move in each dimension. 



You may wonder why I'm working with dx and dy when this object 
moves only horizontally. See, I'm thinking ahead. I'm going to reuse this 
function in the next few programs, which I discuss in the upcoming sec- 
tions. Even though I don't need to move vertically yet, I will as I continue 
programming, so I built the capability in. 

2. Get a reference to the surface. 

Use the normal document . getElementByld trick to extract the sprite 
from the page. Be sure the sprite you're animating has absolute position 
with top and left properties defined in a local style. 



3. Extract the sprite's x and y parameters. 

The horizontal position is stored in the left property. CSS styles are 

stored as strings and include a measurement. For example, the original 

left value of the sprite is lOOpx. For the program, we need only the 

numeric part. The parselnt ( ) function pulls out only the numeric part 

of the left property and turns it into an integer, which is then stored in x . 

Do the same thing to get the y value. Book IV 

x = parselnt (sprite. style. lef t ) ; Chapter 7 

y = parselnt (sprite. style . top) ; 

4. Increment x and y . =. 

Now that you have the x and y properties stored as integer variables, « S 

you can do math on them. It isn't complicated math. Just add dx to x « 60 

and dy to y. This syntax allows you to move the object as many pixels as ^ 
the user wants in both x and y axes. 



function moveSprite (dx, dy) { 



var surface 



= document . getElementByld ( 11 surface " ) ; 



x += dx; 
y + = dy; 
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5. Check boundaries. 

If you have young children, you know this rule: Once you have something 
^Eat can move, it will get out of bounds. If you let your sprite move, it will 
Teave the space you've designated. Checking the boundaries isn't difficult, 
but it's another task, so I'm just calling a function here. I describe check 
Bounds ( ) in the next section, but basically it just checks to see whether 
the sprite is leaving the surface and adjusts its position to stay in bounds. 

checkBounds ( ) ; 



6. Move the ball. 

Changing the x and y properties doesn't really move the sprite. To do 
that, you need to convert the integers back into the CSS format. If x is 
120, you need to set left to 120px. Just concatenate "px" to the end 
of each variable, and JavaScript automatically concatenates. 

// move ball to new position 
sprite . style . left = x + "px"; 
sprite . style . top = y + "px" ; 

7. Print the position. 

For debugging purposes, I like to know exactly where the x and y positions 
are, so I just made a string and printed it to an output panel. 

//describe position 

var output = document .getElementById( "output" ) ; 
output . innerHTML = "x: " + x + ", y: 11 + y; 



Checking the boundaries 

You can respond in a number of ways when an object leaves the playing 
area. I'm going with wrapping, one of the simplest techniques. If something 
leaves the rightmost border, simply have it jump all the way to the left. 

The code handles all four borders: 

function checkBounds () { 
/ /wrap 

if (x > MAX_X) { 

x = MIN_X; 
} // end if 
if (x < MIN_X) { 

x = MAX_X; 
} // end if 
if (y > MAX_Y) { 

y = MIN_Y; 
} // end if 
if (y < MIN_Y) { 

y = MAX_Y; 
} // end if 
} // end function 
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The checkBounds ( ) function depends on the constants, which helps in a 
couple of ways. When you look at the code, you can easily see what's going on: 

DropBooks— 

} // end if 

If x is larger than the maximum value for x, set it to the minimum value. You 
almost can't write it any more clearly than this. If the size of the playing sur- 
face changes, you simply change the values of the constants. 

You probably wonder how I came up with the actual values for the constants. 
In some languages, you can come up with nice mathematical tricks to predict 
exactly what the largest and smallest values should be. In JavaScript, it's a 
little tricky because it just isn't that precise an environment. 

I chose a simple but effective technique. I temporarily took out the check- 
bounds ( ) call and just took a look at the output to see what the values of x 
and y were. I looked to see how large x should be before the sprite wraps 
and wrote down the value on paper. Likewise, I found the largest and small- 
est values for y. 

Once I knew these values, I simply placed them in constants. I don't really 
care that the maximum value for x is 365. 1 just want to know that x doesn't 
go past the max_x value when I'm messing around with it. 

If the size of my playing surface changes, I just change the constants, and 
everything works out fine. 



Shouldn't you just get size values 
from the surface? 



In a perfect world, I would have extracted the 
position values from the playing surface itself. 
Unfortunately, JavaScript/ DOM is not a perfect 
animation framework. Because I'm using 
absolute positioning, the position of the sprite isn't 
attached to the surface (as it should be), buttothe 
main screen. It's a little annoying, but some exper- 
imentation can help you find the right values. 

Remember, once you've started using absolute 
positioning on a page, you're pretty much 



committed to it. If you're using animation like the 
one described in this section, you'll probably 
wantto use absolute positioning everywhere or 
do some othertricksto make sure that the sprite 
stays where you want it to go without overwrit- 
ing other parts of the page. Regardless, using 
constants keeps the code easy to read and 
maintain, even if you have to hack a little bit to 
find the specific values you need. 
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in use JavaScript to read directly from the keyboard. This trick is 
■use!** in a several situations, but it's especially handy in animation and 
simple gaming applications. 



Figure 7-2 shows a program with a moving ball. 




The keyboard . html page has no buttons because the keyboard arrows are 
used to manage all the input. 

You know what I'm going to say. Look this thing over in your browser 
because it just doesn't have any charm unless you run it and mash on some 
arrow keys. 

Building the keyboard paqe 

The keyboard page is very much like the movement page. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>keyboard.html</title> 



Figure 7-2: 

You can 
move the 
ball with the 
arrow keys. 
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<link rel = "stylesheet" 
type = "text/ess" 
href = 11 keyboard. ess" /> 

^?y t type = " text/ javascript " 
src = "movement . js"> 
</script> 

<script type = "text/javascript" 

src = " keyboard . j s " > 
</script> 

</head> 



<body onload = "init()"> 

<hl>Use arrow keys to move ball</hl> 

<div id = " surface "> 
<div id = "sprite" 

style = "position: absolute; 
top: lOOpx; 
left: lOOpx; 
height : 2 5px ; 
width: 25px; " > 
<img src = "ball.gif" 
alt = "ball" /> 

</div> 
</div> 

<p id = " output "> 

x = 100, y = 100 ^^^^^B 
</p> 
</body> 
</html> 

The preceding code is when it really pays off to build reusable code. I basi- 
cally copied the movement .html page with a couple of important changes: 

♦ Import the movement . j s script. This page uses the same functions as 
the movement . html page, so just reimport the script. 

♦ Add another script specific to reading the keyboard. You need a 
couple of modifications, which are housed in a second script file called 

keyboard. j s. 

♦ Keep the rest of the page similar. You still call init ( ) when the body 
loads, and you still want the same visual design, except for the buttons. 
The surface and sprite divs are identical to the movement . html design. 

♦ Take out the form. This page responds to the keyboard, so you no 
longer need a form. 

This program begins with the movement . j s script. As far as the browser is con- 
cerned, that entire script file has been loaded before the keyboard . j s script 
appears. The basic foundation is already in place from movement. The keyboard 
script just handles the modifications to make keyboard support work. 
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|""N ["^ [Working with a keyboard still requires some initialization. I need a little more 

1 [ Q rj Irafi^n the init ( ) function, so I make a new version to replace the version 



red in movement . j s. 



//assumes movement. js 



function init ( ) { 

sprite = document. getElementByld ( "sprite" ) ; 

document . onkeydown = keyListener; 
} // end init 

The order in which you import scripts matters. If you duplicate a function, 
the browser interprets only the last script read. 

Setting up an eVent handier 

In my init ( ) function, I still want to initialize the sprite (as I did in move- 
ment . j s, described in the "Moving the Sprite" section earlier in this chapter). 
When you want to read the keyboard, you need to tap into the browser's event- 
handling facility. Browsers provide basic support for page-based events (such 
as body . onload and button . onclick), but they also provide a lower level 
support for more fundamental input, such as keyboard and mouse input. 

If you want to read this lower level input, you need to specify a function that 
will respond to the input. 




document . onkeydown = keyListener; 



This line specifies that a special function called keyListener is called 
whenever the user presses a key. Keep a couple of things in mind when you 
create this type of event handler: 

♦ It should be called in init ( ) . You'll probably want keyboard handling 
to be available immediately, so setting up event handlers in the init ( ) 
function is common. 

♦ The function is called as if it were a variable. This syntax is slightly 
different than typically used in JavaScript. When you create func- 
tion handlers in HTML, you simply feed a string that represents the 
function name complete with parameters (button onclick = 
"doSome thing ( ) "). When you call a function within JavaScript (as 
opposed to calling the function in HTML), the function name is actually 
much like a variable, so it doesn't require quotes. 

If you want to know the truth, functions are variables in JavaScript. Next 
time somebody tells you JavaScript is a toy language, mention that it 
supports automatic dereferencing of function pointers. Then run away 
before they ask you what that means. (That's what I do . . .) 
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♦ You need to create a function with the specified name. If you've got 
this code in init, the browser calls a function called keyListener ( ) 
lever a key is pressed. (You can call the function something else, 
eyListener ( ) is a pretty good name for it.) 

Responding to keystrokes 

After you've set up an event-handler, you need to write the function to 
respond to keystrokes. Fortunately, this task turns out to be pretty easy. 
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function keyListener (e) { 

// if e doesn't already exist, we're in IE so make it 



if (!e) { 

e = window . event ; 
} // end IE-specific code 

//left 

if (e.keyCode == 37) { 
moveSprite ( -10 , 0) ; 
} // end if 



//up 

if (e.keyCode == 38) { 
moveSprite ( 0 , -10 ) ; 
} // end if 



//right 

if (e.keyCode == 39) { 

moveSprite ( 10 , 0) ; 
} // end if 



//down 

if (e.keyCode == 40) { 

moveSprite (0 , 10); 
} // end if 

} // end keyListener 



The keyListener ( ) function is a good example of an event handler. These 

functions are used to determine what events have happened in the system, 

and to respond to those events. Here's how to build this one: , , 

r Chapter 7 

♦ Event functions have event objects. Just knowing that an event has 

occurred isn't enough. You need to know which key has been pressed. 5* 
Fortunately, the browsers all have an event object available to tell you §' 
what's happened. ,g 

8 <= 

♦ Many browsers pass the event as a parameter. When you create an g: 
event function, the browser automatically assigns a special parameter to E. 
the function. This parameter (normally called e) represents the event. 

Just make the function with a parameter called e, and most browsers 
create e automatically. 

function keyListener (e) { 
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♦ Internet Explorer needs a little more help. Internet Explorer doesn't 
automatically create an event object for you, so you need to specifically 
eate it. 



// if e doesn't already exist, we're in IE so make it 

if (!e){ 

e = window . event ; 
} // end IE-specific code 




♦ You can use e to figure out which key was pressed. The e object has 
some nifty properties, including keyCode. This property returns a 
number that tells you which key was pressed. 

Do a quick search on JavaScript event object to discover other kinds of 
event tricks. I show the most critical features here, but this section is 
just an introduction to the many interesting things you can do with events. 

♦ Compare to known keycodes. You can figure out the keycodes of any keys 
on your keyboard and use basic if statements to respond appropriately. 

//left 

if (e.keyCode == 37) { 
moveSprite(-10, 0); 
} // end if 



♦ Call appropriate variations of moveSprite. If the user presses the left 
arrow, move the sprite to the left. You can use the moveSprite ( ) func- 
tion defined in movement . j s (in the "Moving the Sprite" section of this 
chapter) for this task. 



deciphering the mystery of key codes 

Of course, the big mystery of a keyboard handler is where all those funky 
key numbers came from. How did I know that the left arrow is keycode 37, 
for example? It's pretty simple, really. I just wrote a program to tell me. Figure 
7-3 shows readKeys . html in action. 

Run readKeys and press a few keys. You can then easily determine what 
keycode is related to which key on the keyboard. You may also want to look 
over this code if you're a little confused; because all the code is in one place, 
it may be a bit easier to read than the movement examples. 

If you use a notebook or international keyboard, be aware that some of the key 
codes may be nonstandard, especially numeric keypad keys. Try to stick to 
standard keys if you want to ensure that your program works on all keyboards. 



Follouring the Mouse 

You can also create an event-handler that reads the mouse. Figure 7-4 shows 
such a program. 
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The mouse-following effect is actually quite an easy effect once you know 
ho_w to read the keyboard because it works in almost exactly the same way 
yboard approach. 
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The code for f ollowMouse . html is simple enough that I kept it in one file: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-ecruiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>f ollowMouse . html</ title> 
<script type = "text/javascript"> 
var sprite; 

function init(){ 

sprite = document. getElementById( "sprite" ) ; 

document . onmousemove = mouseListener; 
} // end init 

function mouseListener (e) { 
if (!e){ 

e = window . event ; 
} // end IE catch 

//get width and height 

height = parselnt (sprite . style .height ) ; 
width = parselnt (sprite . style .width) ; 



Figure 7-3: 

This 
program 
reads the 
keyboard 
and reports 
the key 
codes. 
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//move center of sprite to mouse 
x = e.pageX - (width/2); 
y = e.pageY - (height/2); 

sprite . style . left = x + "px" ; 
sprite . style . top = y + "px" ; 
} // end function 
</script> 
</head> 

<body onload = "init()"> 

<hl>Move the mouse and the ball will follow</hl> 
<div id = "sprite" 

style = "position: absolute; 
left: lOOpx; 
top : lOOpx; 
width: 50px; 
height: 50px; "> 
<img src = "ball.gif" 
alt = "ball" /> 

< / div> 
</body> 
</html> 
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The HTML page is simple. This time I'm letting the mouse take up the entire 
page. No borders are necessary because the sprite isn't able to leave the page. 
(If the mouse leaves the page, it no longer sends event messages.) 

Just create a sprite with an image as normal and be sure to call init ( ) 
when the body loads. 
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Mint the muuse unci the bull will follow 



Figure 7-4: 

Now the 
sprite stays 
with the 
mouse. 
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Initializing the code 

initialization is also pretty straightforward: 
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ite a global variable for the sprite. 

Define the sprite variable outside any functions so that it is available 
to all of them. 

var sprite; 

2. Build the sprite in init ( ) . 

The init ( ) function is a great place to create the sprite. 

function init ( ) { 

sprite = document . getElementByld ( "sprite" ) ; 
document . onmousemove = mouseListener; 

3. Set up an event handler in init ( ) for mouse motion. 

This time, you're trapping for mouse events, so call this one 

mouseListener. 

document . onmousemove = mouseListener; 



Building the mouse listener 

The mouse listener works much like a keyboard listener. It examines the 
event object to determine the mouse's current position and then uses that 
value to place the sprite: 

7. Get the event object. 

Use the cross-platform technique to get the event object. 

function mouseListener (e) { 
if (!e) { 

e = window . event ; 
} // end IE catch 

2. Determine the sprite's width and height. 

The top and left properties point to the sprite's top-left corner. 
Placing the mouse in the center of the sprite looks more natural. To cal- 
culate the center, you need the height and width. Don't forget to add 
these values to the local style for the sprite. 

//get width and height 

height = parselnt (sprite . style. height) ; 

width = parselnt (sprite . style. width) ; 

3. Use e .pagex and e .pageY to get the mouse position. 

These properties return the current position of the mouse. 
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It. Determine x and y under the mouse cursor. 

Subtract half of the sprite's width from the mouse's x (e . pageX) so that 
^Ee sprite's horizontal position is centered on the mouse. Repeat with 
Tne y position. 

//move center of sprite to mouse 
x = e.pageX - (width/2); 
y = e.pageY - (height/2); 

5. Move the mouse to the new x and y coordinates. 

Use the conversion techniques to move the sprite to the new position. 

sprite . style. left = x + "px"; 
sprite . style. top = y + "px" ; 




Another fun effect is to have the sprite influenced by the mouse. Don't make 
it follow the mouse directly, but check to see where the mouse is in relation- 
ship with the sprite. Have the sprite move up if the mouse is above the 
sprite, for example. 
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Creating Automatic Motion 

You can make a sprite move automatically by attaching a special timer to the 
object. Figure 7-5 shows the ball moving autonomously across the page. 

Timer .html is surprisingly simple because it borrows almost everything 
from other code. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-eguiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>timer .html</title> 

<link rel = "stylesheet" 
type = "text/ess" 
href = "keyboard. ess" /> 

<script type = " text/ javascript " 

sre = "movement. js"> 
</script> 

<script type = "text/javascript"> 
function init(){ 

sprite = document. getElementByldt "sprite" ) ; 

set Interval ( "moveSprite (5 , 3 ) " , 100) ; 
} // end init 

</script> 
</head> 

<body onload = "init()"> 

<hl>Timer-based movement</hl> 

<div id = " surface "> 
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<div id = "sprite" 

style = "position: absolute; 
— ^ — ^ | top: lOOpx; 

Drop Books isurss, 

| width: 25px; " > 

<img src = "ball.gif" 
alt = "ball" /> 

</div> 
</div> 

<p id = " output "> 

x = 100, y = 100 
</p> 
</body> 
</html> 

The HTML and CSS is exactly the same as the button . html code. Most of 
the JavaScript comes from movement . j s. The only thing that's really new is 
a tiny but critical change in the init ( ) method. 



Figure 7-5: 

This sprite is 
moving on 
its own. (I 
added the 
arrow to 
show 
motion.) 
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Timer-based movement 




Creating a setlnterVal ( ) call 

JavaScript contains a very useful function called setinterval. This thing 
takes two parameters: 
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♦ A function call. Create a string containing a function call including any 
of its parameters. 
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♦ A time interval in milliseconds. You can specify an interval in lOOOths 
of a second. If the interval is 500, the given function is called twice per 
cond, 50 milliseconds is 20 times per second, and so on. 





You can set the interval at whatever speed you want, but that doesn't guar- 
antee things will work that fast. If you put complex code in a function and 
tell the browser to execute it 1,000 times a second, it probably won't be able 
to keep up (especially if the user has a slower machine than you do). 

The browser will call the specified function at the specified interval. Put any 
code that you want repeated inside the given function. 

Don't put anything in an interval function that doesn't have to go there. Because 
this code happens several times per second, it's called a critical path, and any 
wasteful processing here can severely slow down the entire program. Try to 
make the code in an interval function as clean as possible. (That's why I created 
the sprite as a global variable. I didn't want to re-create the sprite 20 times per 
second, making my program impossible for slower browsers to handle.) 

Automatically moving objects are a great place to play with other kinds of 
boundary detection. If you want to see how to make something bounce when 
it hits the edge, look at bounce . html and bounce . j s on the CD-ROM. 



Building Imaqe-SvOappinq Animation 

The other kind of animation you can do involves rapidly changing an image. 
Look at Figure 7-6 to see one frame of an animated figure. 

Animation is never that easy to show in a still screen shot, so Figure 7-7 shows 
the sequence of images used to build the kicking sprite. 

You can use any series of images you want. I got these images from a site 
called Reiner's Tilesets (http : / /reinerstileset . 4players . de/ 
englisch.htm). It includes a huge number of sprites, each with several 
animations. These animations are called Freya. 

Preparing the images 

You can build your own images, or you can get them from a site like Reiner's. 
In any case, here are a few things to keep in mind when building image 
animations: 

♦ Keep them small. Larger images take a long time to download and don't 
swap as smoothly as small ones. My images are 128 by 128 pixels, which 
is a good size. 
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Figure 7-6: 

This sprite is 
kicking! 
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Figure 7-7: 

I used this 
series of 
images to 
build the 
animation. 
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♦ Consider adding transparency. The images from Reiner have a brown 
background. I changed the background to transparent using my favorite 
graphics editor (Gimp). 

♦ Change the file format. The images came in . bmp format, which is ineffi- 
cient and doesn't support transparency. I saved them as . gif images to 
make them smaller and enable the background transparency. 
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Consider changing the names. I renamed the images to make the names 
simpler and to eliminate spaces from the filenames. I called the images 
;LckOO .gif to kickl2 .gif. 



animation images in a subdirectory. With ordinary page images, I 
often find a subdirectory to be unhelpful. When you start building ani- 
mations, you can easily have a lot of little images running around. A 
large number of small files is a good place for a subdirectory 



Building the page 

The code for animation just uses variations of techniques described 
throughout this chapter: a setlnterval function and some DOM coding. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>imageSwap .html</title> 
<script type = "text/javascript"> 
//<! [CDATA [ 

var imgList = new Array ( 
" freya/kickOO .gif" , 
" freya/kickOl .gif" , 
" freya/kick02 .gif" , 
" freya/kick03 .gif" , 
" freya/kick04 .gif " , 
" freya/kick05 .gif" , 
" freya/kick06 .gif" , 
" freya/kick07 .gif" , 
" freya/kick08 .gif" , 
" freya/kick09 .gif" , 
" freya/kicklO .gif" , 
" freya/kickll .gif " , 
"freya/kickl2 .gif" 

) ; 



var frame = 0 ; 
var spritelmage 



function init ( ) { 

setlnterval ( "animate( ) " , 100) ; 

spritelmage = document . getElementByld ( " image " ) ; 
} // end init 



function animate ( ) { 
frame += 1; 

if (frame > imgList . length) { 

frame = 0 ; 
} // end if 

spritelmage . src = imgList [frame] ; 

} 

//] ]> 
</script> 
</head> 



<body onclick = "init()"> 
<div id = "sprite"> 
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<img id = "image" 

src = " f reya/kickOO .gif 11 
alt = "kicking sprite" /> 

> 

The HTML is incredibly simple: 

/. Set up the body with an init ( ) method. 

As usual, the body's onclick event calls an init ( ) method to start 
things up. 

2. Create a sprite div. 

Build a div named sprite. Because you aren't changing the position of 
this div (yet), you don't need to worry about the local style. 

3. Name the img. 

In this program, you animate the img inside the div, so you need to give 
it an id. 

Building the global Variables 

The JavaScript code isn't too difficult, but it requires a little bit of thought. 

/. Create an array of image names. 

You have a list of images to work with. The easiest way to support sev- 
eral related images is with an array of image names. Each element of the 
array is the filename of an image. Put them in the order you want the ani- 
mation frames to appear. 



var imgList = new Array ( 



"freya/kickOO 


■gif", 






" f reya/kickOl 


.gif, 






"freya/kick02 


.gif", 






" f reya/kick03 


■gif", 






"freya/kick04 


■gif", 
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" f reya/kick05 
11 f reya/kick06 


.gif", 
.gif", 
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" f reya/kick07 


.gif", 






"freya/kick08. 


.gif", 






"freya/kick09. 


.gif", 




> 


11 f reya/kicklO 


.gif", 






11 f reya/kickll 


.gif", 






"freya/kickl2 . 

); 


.gif" 
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2. Build a frame variable to hold the current frame number. 

Because this animation has 12 frames, the frame variable goes from 0 to 11. 




var frame = 0 ; 
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3. Set up spritelmage to reference to the img tag inside the sprite tag. 

I var spritelmage 

* Setting up the interval 



The init ( ) function attaches the spritelmage variable to the image 
object and sets up the animate ( ) method to run ten times per second. 



function init ( ) { 

setlnterval ( "animate ( ) " , 100 ) ; 

spritelmage = document. getElementByldf "image" ) ; 
} // end init 

Animating the sprite 

The actual animation happens in the (you guessed it...) animate ( ) function. 
The function is straightforward: 

/. Increment frame. 

Add one to the frame variable. 

frame += 1 ; 

2. Check for bounds. 

Any time you change a variable, you should consider whether it may go 
out of bounds. I'm using frame as an index in the imgList array, so I 
check to see that frame is always less than the length of imgList. 

if (frame > imgList . length) { 
frame = 0 ; 

} // end if 

3. Reset frame, if necessary. 

If the frame counter gets too high, reset it to zero and start the animation 
over. 

If. Copy the image filename over from the array to the src property of 
the spritelmage object. 

This step causes the given file to display. 

spritelmage. src = imgList [ frame] ; 



JavaScript is not an ideal animation framework, but it will do. You do get some 
delays on the first pass as all the images load. (Making the images smaller and 
in the GIF or PNG formats will help with this issue.) Most browsers store 
images locally, so the images animate smoothly after the first pass. 



If you want smoother animation, you can either preload the images or combine 
all the frames into a single image and simply change what part of the image is 
displayed. 
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Even if you don't like animation, these techniques can be useful. You can use 
the setlnterval ( ) technique for any kind of repetitive code you want, 
; the dynamic display of menus or other page elements. In fact, 
BS became the preferred technique, most dynamic menus used 
JavaScript animation. 



Movement and SvJappinq 

Finally, you can combine motion effects with image-swapping to have an image 
move around on the screen with animated motion. Figure 7-8 tries to show this 
effect (but you need to use a browser to really see it). 



Making this program requires nothing at all new. It's just a combination of 
the techniques used throughout this chapter. Figure 7-9 shows the list of 
images used to make Freya run. (I added the arrow again just so you can see 
how the movement works.) 



Figure 7-8: 

Now Freya's 
running 
around the 
screen. Run, 
Freya, Run! 



.* run. html - Mozilla Firefox 
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These are 
the running 
images from 
Reiner's 
Tilesets. 




j& 



The HTML is (as usual) pretty minimal here: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf- 

<title>run.html</title> 

<script type = " text/ javascript " 

src = "run.js"> 
</script> 
</head> 



/> 



<body onload - "init()"> 
<div id = "sprite" 

style = "position: absolute; 
top: lOOpx; 
left: 100px;"> 
<img src = "freya/runO .gif " 
id = 11 image " 

alt = "running image" /> 

</div> 
</body> 
</html> 



When you want to create a moving image-swap animation: 

/. Import the script. 

You can build the script locally (as I did in the last example), but any 
time the script gets complex, it may be better in an external file. 

2. Call an init ( ) method. 

Most animation requires an init ( ) method called from 
body . onload ( ) , and this one is no exception. 

3. Name the sprite. 

The sprite is a div that moves, so it needs absolute position, top and left 
all defined as local styles. 
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4. Name the image. 

Ycm also animate the image inside the sprite. The only property you 
ge here is the src, so no local styles are necessary. 



The JavaScript code is familiar because all the elements can be borrowed 
from previous programs. Here's the code in its entirety: 

//run. js 

var frame = 0 ; 

var imgList = new Array ( 

"freya/runO . gif " , 

" f reya/runl .gif " , 

" freya/run2 .gif 11 , 

" freya/run3 .gif" , 

" f reya/run.4 .gif " , 

" freya/run5 .gif 11 , 

" freya/run6 .gif" , 

" freya/run7 .gif 11 



var sprite; 

var spritelmage; 

var MAX_X = 500 ; 

function init(){ 

sprite = document. getElementByld ( "sprite" ) ; 
spritelmage = document. getElementByld ( "image" ) j 

set Interval ( "animate ( ) " , 100) ; 
} // end init 

function animate ( ) { 

updatelmage ( ) ; 

updatePosition ( ) ; 
} // end animate 

function updatelmage ( ) { 
f rame++; 

if (frame > imgList . length) { 

frame = 0 ; 
} // end if 

spritelmage. src = imgList [frame] ; 
} // end updatelmage 

function updatePosition () { 

sprite = document. getElementByld ( "sprite" ) ; 

var x = parselnt (sprite . style . left) ; 

x += 10; 

if (x > MAX_X) { 

x = 0; 
} //end if 

sprite . style . left = x + "px" ; 
} // end function 
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Defining global Variables 

|""N ["^ |YouUl have a few global variables in this code: 

* Tftrame is the frame number. It is an integer from 0 to 11, which serves as 
the index for the imgList array. 



♦ imgList is an array of filenames with the animation images. 

♦ sprite is the div that moves around the screen. 

4- spritelmage is the img element of sprite and the image that is 
swapped. 

♦ max_x is a constant holding the maximum value of X. In this program, 
I'm only moving in one direction, so the only boundary I'm worried 
about is max_x. If the sprite moved in other directions, I'd add some 
other constants for the other boundary conditions. 



Initializing your data 

The init ( ) function performs its normal tasks: setting up sprite variables 
and calling the animate ( ) function on an interval. 

function init ( ) { 

sprite = document. getElementByld ( "sprite" ) ; 

spritelmage = document. getElementByld ( "image" } ; 
setlnterval ( "animate ( ) " , 100 ) ; 
} // end init 

When you move and swap images, sometimes you have to adjust the animation 
interval and the distance traveled each frame so that the animation looks 
right. Otherwise, the sprite may seem to skate rather than run. 

Animating and updating the image 

I really have two kinds of animation happening at once, so in the grand tradi- 
tion of encapsulation, the animate ( ) function passes off its job to two 
other functions: 



function animate ( ) { 
updatelmage ( ) ; 
updatePosition ( ) ; 

} // end animate 



The updatelmage ( ) function handles the image-swapping duties: 



function updatelmage ( ) { 
frame++; 

if {frame > imgList . length) { 

frame = 0 ; 
} // end if 

spritelmage . src = imgList [frame] ; 
} // end updatelmage 



Mot/ement and Sitiapplnq 




Moving the sprite 

Tile sprite is moved in the updatePosition ( ) function: 



uncCT.oS^updatePosition ( ) { 

sprite = document. getElementByld ( "sprite" ) ; 
var x = parselnt (sprite . style . left) ; 
x += 10; 
if (x > MAX_X) { 

x = 0; 
} // end if 

sprite . style . left = x + "px" ; 
} // end function 
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MM y elcome to the server-side programming portion of the book. In this 
▼ ▼ minibook, you discover all the basics of PHP and how you can use 
PHP to make your pages dynamic and relevant in today's Internet. 

In this chapter, you read about getting your server set up and ready to go. I 
walk you through the process as painlessly as possible, and by the end, 
you'll be up and running, and ready to serve up your own Web pages in a 
test environment. (I talk about making them available to the rest of the 
world in Book VIII.) 



Introducing SerUer-Side Programming 

I begin with an introduction to server-side programming. If you already 
know how this all works, you can safely skip ahead to the section "Installing 
Your Web Server," later in this chapter. 



Programming on the server 

Server-side programming is what you'd use to create pages dynamically on 
the server before sending them to the client. Whereas client-side program- 
ming is executed on the client's machine, server-side programming all hap- 
pens on the server before the Web page is even sent to the user. 

Client-side programming (as done in JavaScript) does most of the work on 
the individual user's machine. This has advantages because those machines 
have doohickeys, like mice and graphics cards. Client-side programs can be 
interactive in real-time. 
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The client has a big problem, though. Programs written on the client usually 
have a form of forced amnesia (no long term memory). For security reasons, 
[cliea^-side applications can't store information in files and can't interact with 
|o\^^programs on the computer. Also, you never know exactly what kind of 
setup the user has, so you can't really be sure if your program will work. 

This is where server-side programming comes in. In a pure server-side pro- 
gramming environment, all the action happens on the Web server. The user 
thinks she's asking for a Web page like normal, but the address really goes to 
a computer program. The program does some magic and produces a Web 
page. The user sees a Web page, perhaps never knowing that an ordinary 
program was in the mix. 

A program running on a Web server has some really nice advantages, such as 

♦ A server-side program can access the local file system. Asking a server 
program to load and save files on the server is no problem at all. 

♦ A server-side program can call external programs. This is a very big 
deal because many Web applications are really about working with data. 
Database programs are very important to modern Web development. 
See Book VI for much more on this. 

♦ All the user sees is ordinary XHTML. You can set up your program to 
do whatever you want, but the output is regular XHTML. You don't have 
to worry about what browser the user has or whether he has a Mac. Any 
browser that can display XHTML can be used with PHP. 

Serving your programs 

When using a browser to retrieve Web pages, you send a request to a server. 
The server then looks at the extension (.html, . php, . j s, and so on) at the 
end of your requested file and decides what to do. If the server sees . html 
or . j s, it says, "Cool, nothing doing here, just gotta send her back as is." 
When the server sees .php, it says, "Oh boy, they need PHP to build some- 
thing here." 

The server takes the page and hollers for PHP to come along and construct 
the requested Web page on the fly. Usually, PHP goes through and looks at 
the programmer's blue print, and then constructs the working page out of 
XHTML. 

The server then takes that page from PHP and sends it back to the client for 
the browser to display to the user. 

When you write ordinary (non-PHP) documents, your pages can go just any- 
where because the browser does all the processing. When you write PHP 



Introducing SerVer-Side Programming 



it. i nis m( 

DropBoote 

torv unde 



programs, a Web server must process the form before the browser can see Book V 

it. This means you have to have a Web server available and place the file in a Chapter 1 
lace on your computer for the server to serve it. You can't run a 
irectly from your Desktop. It must be placed in the htdocs direc- 
tory under the server. •< w 



Picking a language 

There are all sorts of different ways to go about dynamically creating Web 
pages with server-side programming. Back in the day when the Internet was 
still in diapers, people used things like Perl and CGI scripting to handle all 
their server-side programming. Eventually, people placed more and more 
demand on their Web sites, and soon these languages just weren't enough. 

The prevalent languages today are 

♦ ASP.NET: Microsoft's contender 

♦ Java: The heavyweight offering from Sun Microsystems 

♦ PHP: The popular language described in this minibook 
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ASP.NET 

ASP.NET is event-driven, compiled, and object-oriented. ASP.NET replaced 
the '90s language ASP in 2002. Microsoft repurposed it for use with their 
.NET framework to facilitate cross-compatibility with their Desktop applica- 
tions (apps) and integration into Visual Studio (although you can write 
ASP.NET apps from any text editor). ASP.NET runs on Microsoft's IIS Web 
server, which isn't free. I don't recommend it to cost-conscious users. 



Object-oriented (00) versus procedural 



What is the difference between object-oriented 
programs and procedural programs? 

A procedural program normally has all the code 
contained in one file. You start atthe top and go 
to the bottom, possibly calling functions on vari- 
ables, but ultimately running through the whole 
thing, start to finish, just as you see it. 

Object-Oriented Programming (OOP) allows 
you to create objects and call methods on them 
(a method is just a function; but in OOP, func- 
tions are sometimes dubbed methods). Each 



object gets its own text file and contains all its 
own methods. An object is like a mold that you 
can cast multiple copies from. 

The great thing about PHP is that you can 
choose if you want OOP or procedural pro- 
gramming. This book covers both. When it 
makes sense, I utilize the object-oriented capa- 
bilities, and for the simple stuff, I use the pro- 
cedural approach. Don't worry if you don't 
understand this right now. You'll get the hang of 
it later when you begin using OOP in your PHP. 
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Compile versus interpret? 



afSThe difference between an interpreted 
language and a compiled language? A compiled 
language is compiled one time into a more com- 
puter-friendly format forfaster processing when 
called by the computer. Compiled languages 
are typically very fast but not very flexible, 
/nferprefec/languages have to be interpreted on 



the spot by the server every time they're called, 
which is slower but provides more flexibility. 
With blazing fast servers these days, interpreted 
languages can normally stand under the load, 
and the ability to handle changes without 
recompiling can be an advantage in the fast- 
paced world of Web development. 



Jat/a 

Java's been a strong contender for a long time now. The language is indeed 
named after coffee. If you work for a banking company or insurance com- 
pany, or need to build the next eBay or Amazon.com, you might want to con- 
sider Java. However, Java can consume a lot of time, and it's hard to figure 
out. You may have to write up to 16 lines of code to do in Java what it could 
take a mere 4 lines of code in PHP. Java is absolutely free, as is the Apache 
Tomcat Web server that it uses to serve its Web components. Java was origi- 
nally created to write Desktop applications and is still very good at doing 
that. If you're comfortable with C/C++, you'll be very comfortable with Java 
because it's very similar. It's fully object-oriented, and it's compiled. Java is 
powerful, but it can be challenging for beginners. It'd be a great second lan- 
guage to work with. 



PHP 

PHP was born from a collection of modifications for Perl and has boomed 
ever since (in a way, replacing Perl, which was once considered the duct 
tape and bubble gum that held the Internet together). 

PHP works great for your server-side Web development purposes. MediaWiki 
(the engine that was written to run the popular Internet encyclopedia Wiki- 
pedia) runs on PHP, as do many other popular large-, medium-, and small- 
scale Web sites. PHP's a solid, easy-to-learn, well-established language (it's 
13 years old). PHP can be object-oriented or procedural (you can take your 
pick!). PHP is interpreted rather than compiled. 
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A Web server: This is a special program that enables a computer to 
process files and send them to Web browsers. I'll use Apache because 



Chapter 1 

'for PHP to work usefully, you have to have some other things 
on your computer, such as 
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it's free, powerful, and works very well with PHP. 5 

♦ A database backend: Modern Web sites rely heavily on data, so a pro- 
gram that can manage your data needs is very important. I'll use MySQL 
(a free and powerful tool) for this. Book VI is entirely dedicated to creat- 
ing data with MySQL and some related tools. 

♦ A programming language: Server-side programming relies on a lan- 
guage. I'll use PHP because it works great, and it's free. 



Setting up a server-side programming environment can be a daunting task. 
That's a lot of software to download and install, and each piece needs to 
know how to work with all the others. 



Thanks to friends at www. apachef riends . org, it's now easier than ever to 
install all those things in the list. Apachefriends.org bundles them all into 
one little program — XAMPP. Here's how you load it up: 

/. Gotovrww.apachefriends.org. 

2. Scroll down and click XAMPP. 

3. Scroll down and click XAMPP for Windows. 

4. Scroll down and click XAMPP under the Download heading. 

At this point, you can take your pick. I always click the EXE for no other 
reason than it's the smallest. I use that one for this example. 

5. Click EXE (7-Zip). 

This takes you to a SourceForge.net page. (You won't need the 7-Zip soft- 
ware. This program is simply an archive created with 7-Zip.) 

6. Click Save File (Firefox). 

If you're in Internet Explorer, you might get the annoying yellow bar at 
the top of the page letting you know it didn't download the file. Click the 
yellow bar and choose to download the file, and then click Save in the 
File Download pop-up. Go ahead and save the file to your Desktop. 

7. Double-click the xampp-win. . . .exe file on your Desktop. 

Windows might ask you at this point if it's okay to run the file. Click Run. 
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8. Pick a place to extract the program to. 

I^chose C : \ because that's the easiest place to find it. 
ick Extract, and you're done! 

At this point, it's safe to delete the EXE file from your Desktop. 
Okay, great, you've installed XAMPP. See? Easy as pie, just like I said! 



Starting your server 




Okay, so you've installed XAMPP, and you're ready to get your server up and 
running. Here's how: 

/. Browse to the folder where you unzipped XAMPP. 

2. Run the XAMPP Controller (xampp- control . exe). 

You may want to put a shortcut to this program on your Desktop, as 
you'll use it frequently to manage the various parts of the XAMPP 
system. 

At this point, a little utility opens with all sorts of buttons, like some 
sort of crazy universal remote for your server. This program looks like 
Figure 1-1. 



Figure 1-1: 

The XAMPP 
Control 
Panel lets 
you turn on 
the various 
parts of 
XAMPP. 
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3. Under Modules and to the right of Apache, click the Start button. 

You'll probably get a Windows Security Alert that asks if you want to 
keep blocking the Apache HTTP Server program. Click Unblock. 

U. Check to see that your server is running correctly. 
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If all is working well, the Start button (in the Control Panel, not the Book V 

Windows Start button) should change to read Stop, and to the left of it, Chapter 1 
hould see a green area containing Running. The server doesn't 
a graphic interface like most programs, so without this indication, 
you might not know it's running. ;< ^ 
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You can also start Apache (and MySQL) by clicking xampp_start . exe. This 
opens a command or console window telling you that ### APACHE + MYSQL < c 

IS STARTING NOW ###. You can stop them by clicking xampp_stop . exe. I 
personally prefer the XAMPP Control Panel because it's more user-friendly 
and pretty. 

For now, Apache is the only thing you need to have running. See more details 
about the other parts of XAMPP in Book VIII, Chapter 1. 



Testing the installation 

How do you know if your server really is working? Follow these steps: 

/. Open a Web browser. 

2. Browse to http: //localhost. 

You should get a XAMPP page with a congratulatory message on it that looks 
like Figure 1-2. 



Figure 1-2: 

The server 
is installed! 
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Security 
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phpMy Admin 
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Welcome to XAMPP for Windows Version 1.6.0a ! 

Congratulations: 

You successfully installed XAMPP on this system! 

Now you can start using Apache and Co. Firstly you should try »Status« on the left navigation to make sure everything works fine. 
For OpenSSL support please use the test certificate with httpsn/127 Q.Q.i or https://localhost 

And very important! Big thanks for help and support to Carsten, Nemesis, Kris, Boppy, Pc-Dummy and all other friends of XAMPP! 
Good luck, Kay Vogelgesang + Kai 'Oswald' Seidler 
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Great job, you're now officially a Server Admin! Don't put that on your 
resume just yet, though. . . . 




lo you do if it doesn't work? Check www. apachef riends . org/en/ 
f aq-xampp-windows .html to see if it addresses your problem. Otherwise, 
try Googling the specific problem you're having. Lastly, you could try post- 
ing on www. apachef riends . org/f / ?language=english to see if anyone 
can help you. 



Inspecting phpinfo ( ) 

Using your shiny new server is really quite simple, but a lot of beginners can 
get confused at this point. 

One thing you have to remember is that anything you want the server to 
serve must be located in the server's file structure. If you have a PHP file on 
your Desktop and you want to view it in your browser, it won't work because 
it isn't in your server. Although, yes, technically it is on the same machine as 
your server (XAMPP), it is not in the server. 

So, to serve a file from the server, it must be located in the htdocs directory 
of your server install. Go to the folder where you installed XAMPP (probably 
either c : /xampp or c : /Program Files/xampp) and locate the htdocs 
directory. This is where you'll put all your PHP files. Make note of it now. 

To get the hang of placing your files in the correct place and accessing them 
through localhost, create a test file that will display all your PHP, Apache, 
and MySQL settings. 

The following numbered list creates a file in Aptana Studio that will test your 
XAMPP configuration to ensure that Apache is up and running: 

/. Open Aptana Studio. 

As always, you can use any text editor you want, but Aptana is opti- 
mized for working with PHP code, so that's the one I use for this 
example. 

2. From the File menu, choose NewOOther. 

This will take you to a list of file types Aptana knows how to handle. 

3. Pick Untitled PHP File from the resulting dialog box. 

This tells Aptana you want to write a PHP file, and it automatically cre- 
ates a very simple but powerful PHP sample program. 
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it. Save the file as test . php. Book V 

■ , . , r ., . Chapter 1 

It s important that you save the file in the htdocs directory. 



your browser. 




page like Figure 1-3. 

This phpinfo page that you're looking at is critical in inspecting your server 
configuration. It displays all the different settings for your server, describing 
what version of PHP is running and what modules are currently active. This 
can be very useful information. 

You generally should not have a page with all the phpinfo ( ) information 
running on a live server because it tells the bad guys information they might 
use to do mischief. 

This test . php program shows one of the most interesting things about 
PHP. The program itself is just a few lines long, but when you run it, the 
result is a complex Web page. If you view the source on the Web page, you'll 
see a lot of code you didn't write. That's the magic of PHP. You write a pro- 
gram, and it creates a Web page for you. 



Point your browser to http : / /localhost/ test .php. You'll see a g g 

oo 5" 

cd <n 



Figure 1-3: 

That tiny 
PHP 

program 
sure puts 
a lot of 
information 
on the 
screen. 
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PHP Version 5.2.1 



php 



System 


HMOM NT -,H-f3RIS_LT 5 1 build 2600 


Build Date 


Feb 7 2007 23:10:31 


Configure Command 


^script nolc:: configure js --enaple-snapshot-build -witi-B(f=Bhared 


Server API 


Apache 2.0 Handler 


Virtual Directory Support 


enabled 


Configuration File (php.ini) 
Path 


CiProgram Files .■ampp.apacrie.bin'php.ini 


PHP API 


20041225 


PHP Extension 


20060613 






Zend Extension 


2200-50519 


Debug Build 




Thread Safety 


enabled 


Zend Memory Manager 


enabled 


IPv6 Support 


enabled 


Registered PHP Streams 


php. file. data. http. tp. compress -lib. https. ftps.Hp 


Registered Stream Socket 
Transports 


bV, udp, ssl, sstv3, ssrv2, 8s 


Registered Stream Filters 


convert icon V. string rot13. stringtoupper. string tolower. string stnp_tags. 
convert*, consumed, zJib." 



This program maces use of the Zend Scripting Language Engine: 

Zend Engine v2 2 0. Copynght ic; 1998-2007 Zend Technologies 
with Zend Extension Manager v1.0.11. Copyright ic: 2003-2005. by Zend Technologic 
with Zend Optimizer v3.2 2. Copyright ic: 1998-2005. b; Zend Technologies 
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jr / 0 warnings O yjj 
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By default, Apache will load index . html or index . php automatically if 
vou type a directory path into the Web browser. There's already a program 
mi>h**iocs called i ndex . php . Rename it i ndex . php .off. Now, if you navi- 
|<\t^>) http : / /localhost/, you'll see a list of directories and files your 
server can run, including test .php. When you have a live site, you'll typi- 
cally name one file index . html or index . php so the user doesn't have to 
type the entire filename. 

To reveal line numbers in Aptana, right-click in the margin to the left of the 
document body (where you'd expect line numbers to be). 
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In This Chapter 

V Creating your first PHP program 
v* Using quotation marks 

Working with variables PHP style 
W Interpolating variables into text 

Creating heredocs 

f 

■ n PHP, you aren t actually printing anything to the user; you're building 
4 an HTML document that will be sent to the browser, which will interpret 
the HTML and then print that (the HTML) out to the user. Therefore, all your 
code gets interpreted twice; first on the server to generate the HTML and 
then on the user's machine to generate the output display. 

If you've used XHTML, CSS, and JavaScript, you might have been frustrated 
because all of these environments run on the client, and you have no con- 
trol of the client environment. You don't know what browser the user will 
have, and thus you don't know exactly how XHTML, CSS, and JavaScript will 
run there. When you program in PHP, you're working on a machine (the 
server) that you actually control. You know exactly what the server's capa- 
bilities are because (in many cases) you configured it yourself. 

It's still not a perfect situation, though, because your PHP code will generate 
XHTML/CSS pages (sometimes even with JavaScript), and those pages still 
have to contend with the wide array of client environments. 



Creating \lour First PHP Program 

The first program you ever write in any language is invariably the "Hello 
World ! " program or some variant thereof. Follow these steps: 

/. Create a new PHP file in Aptana Studio. 

See Chapter 1 of this minibook for instructions on creating a PHP file in 
Aptana. 
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If you're using some other text editor, just open a plain text file however 
you normally do that (often FileONew) and be sure to save it under 
docs with a .php extension. 

ter the following code: 

<?php 

print "Hello World!"; 
?> 

Depending on your installation of Apache, you may be able to use the 
shorter <? ?> version of the PHP directive (instead of <?php ?>). 

3. Save the file by pressing Ctrl+S, choosing FileO Save from the menu, 
or clicking the picture of the computer disk. 

Remember to save directly into htdocs or a subdirectory of htdocs. 

It. View the file in a Web browser, as shown in Figure 2-1. 

The address of a Web page begins with the http : / / protocol and then 
the server name. Since this page is on the local machine, the server 
name is localhost, which corresponds directly to your htdocs direc- 
tory. If you have a file named thing . php in the htdocs directory, the 
address would be http : / /localhost /thing. php. Likewise, if it's in a 
subdirectory of htdocs called pro j ect, the address would be 
http : / /localhost /pro j ect/ thing .php. 



Figure 2-1: 

The "Hello 
World!" 
program 
example. 
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echo or print? 



/to generate your code for 
the browser. In almost all circumstances, you 
use echo exactly like you use print. 
Everyone knows what print does, but echo 
sounds like I should be making some sort of dol- 
phin noise. 

The difference is that print returns a value 
and echo doesn't, print can be used as part 
of a complex expression and echo can't. It 



really just comes down to the fact that print 
is more dynamic, whereas echo is slightly (and 
I'm talking very slightly here) faster. 

I prefer print because there's nothing that 
echo can do that print can't. 

To see a more detailed discussion go here: 

www. f aqts . com/knowledge_base/ 
view. phtml/aid/1/ fid/40. 



So, what is it that you've done here? You've figured out how to use the 
print statement. This allows you to spit out any text you want to the user. 

Note that each line ends with a semicolon (,-). There may be times when 
your program throws an error that you just can't figure out. In these cases, I 
recommend looking first for missing semicolons. It seems obvious, but time 
and time again, it turns out to be a missing semicolon (same goes with 
brackets and parentheses). Aptana will give you a red squiggly if you forget 
the semicolon. 

Coding With Quotation Marks 

There are many different ways to use print. The following are all legal ways 
to print text, but they have subtle differences: 

print ("<p>Hello World! </p>" ) ; 
print ("<p>Hello World ! <br /> 
Hello Computer ! </p> ") ; 

print ' <p><a href ="http: //www. google . com">Hello Google ! </ax/p> 1 ; 

Any way you cut it, you have to have some form of quotations around text 
that you want printed. 

What if you want to print double quotation marks inside a print statement 
surrounded by double quotation marks? You escape them (you tell PHP to 
treat them as literal characters, rather than the end of the string) with a 
backslash, like this: 

print "<a href =\ " link. html\ ">A Link</a>"; 

This can get tedious, so a better solution is discussed in the "Generating 
output with heredocs" section, later in this chapter. 
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Escape sequences 



rst seCTlon of this chapter, "Creating 
Your First PHP Program," you see that you can 
escape double quotation marks with a back- 
slash. Quotation marks aren'tthe only thing you 
can escape, though. You can give a whole host 
of other special escape directives to PHP. 

The most common ones are 

\t (creates a tab in the resulting HTML) 

\n (creates a new line in the resulting HTML) 

\ $ (creates a dollar sign in the resulting HTML) 



\" (creates a double quote in the resulting 
HTML) 

\ ' (creates a single quote in the resulting 
HTML) 

\ \ (creates a backslash in the resulting HTML) 

PHP cantake care of thisforyou automatically 
if you're receiving these valuesfrom a form. To 
read more, go here: http://us3.php. 
net /types . string. 




This backslash technique works only with text encased inside double quotes. 
Single quotes tell PHP to take everything inside the quotes exactly as is. 
Double quotes give PHP permission to analyze the text for special charac- 
ters, like escaped quotes (and variables, which you learn about in the next 
section of this chapter). 
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Variables are extremely important in any programming language and no less 
so in PHP. 

A variable in PHP always begins with a $. 

A PHP variable can be named almost anything. There are some reserved 
words that you can't name a variable (like print, which already has a mean- 
ing in PHP), so if your program isn't working and you can't figure out why, 
try changing some variable names or looking at the reserved words list (in 
the online help at http : / /www . php . net) to find out if your variable name 
is one of these illegal words. 

PHP is very forgiving about the type of data in a variable. When you create a 
variable, you simply put content in it. PHP automatically makes the variable 
whatever type it needs. This is called loose typing. The same variable can 
hold numeric data, text, or other more complicated kinds of data. PHP deter- 
mines the type of data in a variable on-the-fly by examining the context. 
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mat data i 
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call text d 



Even though PHP is cavalier about data types, it's important to understand BookV 

that data is still stored in one of several standard formats based on its type. Chapter 2 
orts several forms of integers and floating-point numbers. PHP also 

support for text data. Programmers usually don't say "text," but m 

call text data string data. This is because the internal data representation of = 

text reminded the early programmers of beads on a string. You rarely have % 3 

to worry about what type of information you're using in PHP, but you do -g =' 

need to know that PHP is quietly converting data into formats it can use. ^ i 



Concatenation 

Concatenation is the process of joining smaller strings together to form a 
larger string. (See Book IV, Chapter 1 for a description of concatenation as 
it's applied in JavaScript.) PHP uses the period (.) symbol to concatenate 
two string values, so the following code returns the phrase "oogie boogie": 



$word = "oogie 11 ; 
$dance = "boogie"; 

Print $word . $dance 



If you already know some JavaScript or another language, most of the ideas 
transfer, but details can trip you up. JavaScript uses the + sign for concate- 
nation, and PHP uses the period. These are annoying details, but with prac- 
tice, you'll be able to keep it straight. 

When PHP sees a period, it treats the values on either side of the period as 
strings (text) and concatenates (joins) them together. If PHP sees a plus sign, 
it treats the values on either side of the plus sign as numbers and attempts 
to perform mathematical addition on them. The operation helps PHP figure 
out what type of data it is working with. 

The following program illustrates the difference between concatenation and 
addition (see Figure 2-2 for the output): 



<?php 

$output = "World! " ; 

print "<p>Hello " . $output . "</p>"; 
print "<p>" . $output + 5 . "</p>"; 

?> 



The previous code takes the variable output with the value World and con- 
catenates it to Hello when printed. Next, it adds the variable output to the 
number 5. When PHP sees the plus sign, it interprets the values on either 
side of it as numbers. Because output has no logical numerical value, 
PHP assigns it the value of 0, which it adds to 5, resulting in the output of 
<p>5</p> being sent to the browser. 
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Figure 2-2: 

The differ- 
ence 
between 
addition and 
concate- 
nation. 
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Interpolating Variables into te)ct 

If you have a bunch of text to print with variables thrown in, it can get a 
little tedious to use concatenation to add in the variables. Luckily, you don't 
have to! 

With PHP, you can include the variables as follows (see Figure 2-3 for the 
output): 

<?php 

$f irstName = "John" ; 
$lastName = "Doe"; 

print "Hello $firstName $lastName ! " ; 

?> 

This process is called interpolation. Since all PHP variables begin with 
quotes, you can freely put variables right inside your string values, and 
when PHP sees a variable, it will automatically replace that variable with its 
value. 

Interpolation only works with double-quoted strings because double quotes 
indicate PHP should process the string before passing it to the user. 
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Figure 2-3: 
The 

variables 
are printed 
out without 
having to do 
annoying 
concate- 
nations. 



The output of a PHP program is usually an XHTML page. As far as PHP is 
concerned, XHTML is just string data, so your PHP program often has to do a 
lot of string manipulation. You'll often be writing long chunks of text (XHTML 
code) with several variables (generated by your PHP program) interspersed 
throughout the code. This type of text (XHTML output) will often stretch 
over several lines, requires carriage returns to be preserved, and often con- 
tains special characters like quotes and <> symbols. The ordinary quote 
symbols are a little tedious if you want to use them to build a Web page. 
Here's an example. 

Say you wanted to create a program which could take the value of the $name 
and $address variables and put them into a table like this: 

<table style = "border: lpx solid black"> 
<tr> 
<td>name</td> 
<td>John</td> 
</tr> 
<tr> 

<td>address</td> 
<td>123 Main St.</td> 
</tr> 
</table> 




Budding XHTML Output 
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There are a few ways to combine the PHP and XHTML, code as shown in the 
following sections. 

a double ({uote interpolation 

Using regular double quotes, the code would look something like this: 




$name = "John"; 



$address 
$ output 
$ output 
$ output 
$ output 
$ output 
$ output 
$ output 
$ output 
$ output 
$output 
$ output 



123 Main St. " ; 

<table style = V'border: lpx solid black\"> \n"; 
<tr> \n" ; 
<td>name</td> \n" ; 
<td>$name</td> \n" ; 
</tr> \n"; 
<tr> \n" ; 

<td>address</td> \n" ; 
<td>$address</td> \n" ; 
</tr> \n"; 
</table> \n"; 



print $output 



However, using quotes to generate XHTML output is inconvenient for the fol- 
lowing reasons: 



♦ The $output variable must be initialized. Before adding anything to 
the $output variable, give it an initial null value. 

♦ You must repeatedly concatenate data onto the $output variable. The 

. = operator allows me to append something to the end of a string 
variable. 

♦ All quotes must be escaped. Because double quotes indicate the end 
of the string, all internal double quotes must be preceded with the 
backslash (\). 

♦ Every line must end with a newline (\n) sequence. PHP creates 
XHTML source code. Your PHP-derived code should look as good as 
what you write by hand, so you need to preserve carriage returns. This 
means you need to end each line with a newline. 

♦ The XHTML syntax is buried inside PHP syntax. The example shows 
PHP code creating HTML code. Each line contains code from two 
languages interspersed. This can be disconcerting to a beginning 
programmer. 



Generating output With heredocs 

PHP uses a clever solution called heredocs to resolve all these issues. A here- 
doc is simply a type of multi-line quote, usually beginning and ending with 
the word here. 



Building XHTML Output 509 



The best way to understand heredocs is to see one in action, so here's the 
same example written as a heredoc: 

DropBooks_ 

$address = "123 Main St."; 
print «<HERE 

<table style = "border: lpx solid black"> 
<tr> 

< td>name< / td> 

< td> $name< / td> 
</tr> 

<tr> 

<td>address</td> 

< td> $address< / td> 
</tr> 
</table> 
HERE ; 
?> 

Heredocs have some great advantages: 

♦ All carriage returns are preserved. There's no need to put in any new- 
line characters. Whatever carriage returns are in the original text will 
stay in the output. 

♦ Heredocs preserve quote symbols. There's also no need to escape your 
quotes because the double quote is not the end-of-string character for a 
heredoc. 

♦ Variable interpolation is supported. You can use variable names in a 
heredoc, just like you do for an ordinary quoted string. 

♦ The contents of a heredoc feel like ordinary XHTML. When you're 
working inside a heredoc, you can temporarily put your mind in XHTML 
mode, but with the ability to interpolate variables. 

The following are some things to keep in mind about heredocs: 

♦ A heredoc is opened with three less-than symbols (<<<) followed by a 
heredoc symbol that will act as a "superquote" (instead of single or 
double quotation marks, you make your own custom quotation mark out 
of any value that you want). 

♦ A heredoc symbol can be denoted by almost any text, but here is the 
most common delimiter (thus, heredoc). You can make absolutely any- 
thing you want serve as a heredoc symbol. You probably should just 
stick to here because that's what other programmers are expecting. 

♦ You need only one semicolon for the whole heredoc. Technically, the 
entire heredoc counts as one line. That means the only semicolon you 
need is after the closing symbol. 
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Printing shortcut 



ertTWrtcrTirlTpn and out of PHP, if you have 
just one variable you want to print, depending 
upon your server setup, you may be able to do 
print the variable like this: 

<?= $name ?> 



You don't have to actually write print. Note 
that this doesn't work if you have to type php 
afterthe question mark inthe opening PHPtag. 



-AVMG 





♦ A heredoc must be closed with the same word it was opened with. 
4- The closing word for the heredoc must be on its own line. 

♦ You can't indent the closing word for the heredoc; there can't be any 
spaces or tabs preceding the closing word. 

By far the most common problem with heredocs is indenting the closing 
token. The here (or whatever other symbol you're using) must be flush with 
the left margin of your editor, or PHP will not recognize it. This usually 
means PHP interprets the rest of your program as part of a big string and 
never finishes executing it. 

Heredocs have one disadvantage: They tend to mess up your formatting 
because you have to indent heredocs differently than the rest of the code. 

When writing a heredoc, don't put a semicolon after the first <<<here and 
don't forget that the last here ; can't have any whitespace before it — it 
must be alone on a new line without any spaces preceding it. 



Switching from PHP to XHTML 



There's one more way to combine PHP and XHTML code. The server treats a 
PHP document mainly as an XHTML document. Any code not inside the 
<?php ?> symbols is treated as XHTML, and anything inside the PHP sym- 
bols is interpreted as PHP. 

This means you can switch in and out of PHP, like the following example: 

<?php 

$name = "John"; 

$address = "123 Main St."; 

// switch 'out' of PHP temporarily 

?> 

<table style = "border: lpx solid black"> 
<tr> 
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<td>name</td> 

<tdx?php print $name; ?></td> 
/tr> 



td^idress</td> 

tdx?php print $address; ?></td> 
</tr> 
</table> 
<?php 

//I'm back in PHP 

?> 



This option (switching back and forth) is generally used when you have a lot 
of XHTML code with only a few simple PHP variables. 
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In This Chapter 

W Understanding the relationship between XHTML and PHP 

Using the date ( ) function 
v* Formatting date and time information 

Creating XHTML forms designed to work with PHP 
j-" Choosing between get and post data transmission 

Retrieving data from your XHTML forms 

Working with XHTML form elements 



MiJ HP is almost never used on its own. PHP is usually used in tight con- 
w junction with XHTML. Many languages have features for creating input 
forms and user interfaces, but with PHP, the entire user experience is based 
on XHTML. The user never really sees any PHP. Most of the input to PHP 
programs comes from XHTML forms, and the output of a PHP program is an 
XHTML page. 

In this chapter, you discover how to integrate PHP and XHTML. You explore 
how PHP code is embedded into XHTML pages, how XHTML forms can be 
written so they will send information to a PHP program, how to write a PHP 
program to read that data, and how to send an XHTML response back to the 
user. 



Exploring the Relationship between PHP and XHTML 

PHP is a different language than XHTML, but they are very closely related. It 
may be best to think of PHP as an extension that allows you to do things you 
cannot do easily in XHTML. See Figure 3-1 for an example. 
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Figure 3-1: 

This pro- 
gram gives 
me the 
current date 
and time. 
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g the Time, PHP Style 

Date: 02-15 
Time: 12:55 



O 0 L 



Now: Cloudy, 34" F ^JjJ Fn;30 c F O Sat 34" F ^ 



Every time you run getTime .php, it generates the current date and time, 
and returns these values to the user. This would not be possible in ordinary 
XHTML because the date and time (by definition) always change. While you 
could make this page using JavaScript, the PHP approach is useful for 
demonstrating how PHP works. First, take a look at the PHP code: 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-ecruiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>showDate .php</title> 

</head> 

<body> 
<body> 

<hl>Getting the Time, PHP Style</hl> 
<?php 

print " <h2>Date: "; 

print date ( "m-d" ) ; 
print "</h2> \n" ; 

print " <h2>Time: "; 

print date ( "h: i" ) ; 
print "</h2>"; 
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?> 



BookV 
Chapter 3 





Embedding PHP inside XHTML 



The PHP code has some interesting characteristics: 



♦ It's structured mainly as an XHTML document. The doctype definition, 
document heading, and initial HI heading are all ordinary XHTML. Begin 
your page as you do any XHTML document. A PHP page can have as 
much XHTML code as you wish. (You might have no PHP at all!) The 
only thing the PHP designation does is inform the server that PHP code 
may be embedded into the document. 

♦ PHP code is embedded into the page. You can switch from XHTML to 
PHP with the <?php tag. Signify the end of the PHP code with the ?> 
symbol. 

♦ The PHP code creates XHTML. PHP is usually used to create XHTML 
code. In effect, PHP takes over and prints out the part of the page that 
can't be created in static XHTML. The result of a PHP fragment is usually 
XHTML code. 

♦ The date ( ) function returns the current date with a specific format. 

The format string indicates how the date should be displayed. (See the 
sidebar "Exploring the date() format function," in this chapter, for more 
information about date formatting.) 

♦ The result of the PHP code will be an XHTML document. When the 
PHP code is finished, it will be replaced by XHTML code. 



If you view showDate . php in your browser, you won't see the PHP code. 
Instead, you'll see an XHTML page. It's even more interesting when you use 
your browser to view the page source. Here's what you'll see: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 

<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 



<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>showDate .php</title> 
</head> 

<body> 

<hl>Getting the Time, PHP Style</hl> 
<h2>Date: 02-13</h2> 
<h2>Time: 10:02</h2> 
</body> 
</html> 



Vievtiinq the results 



<head> 
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Exploring the date() format function 

'owDa^^.php program takes advan- 
tage of one of PHP's many interesting and pow- 
erful functions to display the date. The PHP 
date ( ) function returns the current date. 
Generally, you'll pass the date ( ) function a 
special format string that indicates how you 
want the date to be formatted. Characters in 
the date string indicate a special code. Here 
are a few of the characters and their meanings: 



y: two-digit representation of the year 
("08") 

y: four-digit representation of the year 
("2008") 



W d: day of the month (numeric) 

d: three character abbreviation of weekday 
("Wed") 

m: month (numeric) 

m: three character abbreviation of month 
("Feb") 

V f: text representation of month ("February") 



h: hour(12 hours) 
h: hour (24 hours) 
i: minutes 
s: seconds 



You can embed standard punctuation in the 
format, as well, so d/m/y will include the 
slashes between each part of the date. There 
are many more symbols available. Check the 
PHP documentation athttp: //us3 .php. 
net /manual /en/ function . date .php 
for more information about date and time 
formatting. 



The remarkable thing is what you don't see. When you look at the source of 
showDate .php in your browser, the PHP is completely gone! This is one of 
the most important points about PHP: The browser never sees any of the 
PHP. The PHP code is converted completely to XHTML before anything is sent 
to the browser. This means that you don't need to worry about whether a 
user's browser understands PHP. Because the user never sees your PHP code 
(even if he views the XHTML source), PHP code will work on any browser. 

Sending Data to a PHP Program 

You can send data to a PHP program from an HTML form. For an example of 
this technique, see askName . html in Figure 3-2. 

XHTML forms (described fully in Book I, Chapter T) allow the user to enter 
data onto a Web page. However, XHTML cannot respond to a form on its 
own. You need some sort of program to respond to the form. Book IV 
describes how to use JavaScript to respond to forms, but you can also write 
PHP code to handle form-based input. When the user submits the form, the 
askName . html disappears completely from the browser and is replaced 
with greetUser .php, as shown in Figure 3-3. 
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Figure 3-2: 

This XHTML 
page has a 
simple form. 



askName.html - Mozilla Firefox 

e Edit View History Bookmarks ; 



' ^ |H http:/Malriost.'xfd/3r/xftl5.3_AR_AH/askName.html 



► El- 



Book V 
Chapter 3 



rnamc [Andy Harris 



l£ 0 errors /Owarn.ngs O & 0 Now: Gourjy, 34= F Fri^F ■; j, Sat 34= F 



31 » 



5 greetUser.php - Mozilla Firefox 



Figure 3-3: 

This 
program 
uses the 
entry from 
the previous 
form. 



- $M 



Rte Edt Vew Hstory Bookmarks Tools 



fjj L^rf http ;.^i)calhosi;xfg/ar;«fd5J_Afi_AM/greetL^er.glip?userrJame-And y%20Harre 



EEBE 



Hi, Andy Harris! 



1^ 0 errors /0 warnings O ^ 



% Now: Cloudy, 34= F Frf;30"F O Sat: 34" = 
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The greetuser .php program retrieves the data from the previous page 
(askName . html, in this case) and returns an appropriate greeting. 



ting a form for PHP processing 

The askName . html program is a standard XHTML form, but it has a couple 
of special features which make it suitable for PHP processing. (See Book I, 
Chapter 7 for more information about how to build XHTML forms.) Here is 
the XHTML code: 



<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>askisrame .html</title> 
</head> 



<body> 

<form action = "greetUser.php" 
method - "get"> 
<f ieldset> 

<label>Please enter your name</label> 
<input type = "text" 

name = "userName" /> 
<button type = "submit 11 > 

submit 
</button> 
</fieldset> 

</form> 
</body> 
</html> 



To build a form designed to work with PHP, there are a few special steps to 
take: 

/. Write an XHTML page as the framework. 

This page is a regular XHTML page. Begin with the same XHTML frame- 
work you use for building your standard XHTML pages. You can use CSS 
styles, if you wish (but I'm leaving them out of this simple example). 

Normally, you can create an XHTML document anywhere you want, but 
this is not so when your page will be working with PHP. This page is meant 
to be paired with a PHP document. PHP documents will run only if they 
are in a server's file space, so you should save your XHTML document 
under htdocs to be sure it will be able to call the PHP form correctly. 

2. Set the form's action property to point to a PHP program. 

The form element has an attribute called action. The action attribute 
is used to determine which program should receive the data transmitted 
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by the form. I want this data to be processed by a program called BookV 
greetUser .php, SO I set greetUser .php as the action: Chapter 3 



<form action = "greetUser .php" 

method = "get"> 



3. Set the form's method attribute to get. 

The method attribute indicates how the form data will be sent to the 
server. For now, use the get method. See the section "Choosing the 
Method of Your Madness," later in this chapter, for information on the 
various methods available: 

<form action = "greetUser. php" 
method = "get"> 

4. Add any input elements your form needs. 

The point of a form is to get information from the user and send it to a 
program on the server. Devise a form to ask whatever questions you 
want from the server. My form is as simple as possible, with one text 
field, but you can use any XHTML form elements you want: 

<form action = "greetUser. php" 
method = "get"> 
<f ieldset> 

<label>Please enter your name</label> 
< input type = "text" 

name = "userName" /> 
<button type = 11 submit "> 

submit 
</button> 
</f ieldset> 

5. Give each element a name attribute. 

If you want a form element to be passed to the server, you must give it a 
name attribute (note this is a different attribute than id, which is used in 
client-side processing): 

<input type = "text" 

name = "userName" /> 

The name attribute will be used by the PHP program to extract the infor- 
mation from the form. 

A form element can have both a name and an ID, if you wish. The name 
attribute will be used primarily by server-side programs, and the id 
attribute is mainly used for CSS and JavaScript. The name and ID can 
(and probably should) have the same value. 

6. Add a submit button to the page 

The most important difference between a client-side form and a form 
destined for processing on the server is the button. A special submit 
button packages all the data in the form and passes it to the program 
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indicated in the action property. Submit buttons can be created in two 
forms: 




<input type = "submit" value = "click me"/> 



<button type = " submit ">click me</button> 



Specify submit as the button's type attribute to ensure the button 
sends the data to the server. 

If your form has a submit button and a blank action attribute, the cur- 
rent page will be reloaded. 



Receiving data in PHP 



PHP code is usually a two-step process. First, you create an XHTML form, 
and then you send that form to a PHP program for processing. Be sure 
you've read the previous section on "Creating a form for PHP processing" 
because now I show you how to read that form with a PHP program. 

The XHTML form in the last section pointed to a program named greetuser . 
php. This tells the server to go to the same directory that contained the orig- 
inal XHTML document (askName . html) and look for a program named 
greetuser .php in that directory. Because greetUser is a PHP program, the 
server passes it through PHP, which will extract data from the form. The pro- 
gram then creates a greeting using data that came from the form. Look over 
all the code for greetuser . php before I explain it in more detail: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /Ed" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf- 
<title>greetUser .php</title> 
</head> 



8" /> 



<body> 
<?php 

$userName = $_REQUEST [ "userName " ] 
print "<hl>Hi, $userName ! </hl>" 
?> 

</body> 
</html> 



greetuser .php is not a complex program, but it shows the most common 
use of PHP: retrieving data from a form. Here's how you build it: 

/. Build a new PHP program. 

This program should be in the same directory as askName . html, which 
should be somewhere the server can find (usually under the htdocs or 
public_html directory). 
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2. Start with ordinary XHTML. 

PHP programs are usually wrapped inside ordinary XHTML, so begin the 
ment as if it were plain XHTML. Use whatever CSS styling and ordi- 
HTML tags you want. (I'm keeping this example as simple as possi- 
ble, although I'd normally add some CSS styles to make the output less 
boring.) 

3. Add a PHP segment. 

Somewhere in the page, you'll need to switch to PHP syntax so you can 
extract the data from the form. Use the <?php symbol to indicate the 
beginning of your PHP code: 

<?php 

$userName = $_REQUEST [ "userName" ] ; 
print "<hl>Hi, $userName!</hl>" ; 

?> 

tf. Extract the username variable. 

PHP stores all the data sent to the form inside a special variable called 
$_request. This object contains a list of all the form elements in the 
page that triggered this program. In this case, I want to extract the value 
of the userName field and store it in a PHP variable called $userName: 

$userName = $_REQUEST [ "userName" ] ; 

See the section called "Getting data from the form," later in this chapter, 
for more information on the $_request object and some of the other 
tools that are available for retrieving information. 

5. Print the greeting. 

Now, your PHP program has a variable containing the user's name, so 
you can print a greeting to the user. Remember that all output of a PHP 
program is XHTML code, so be sure to embed your output in a suitable 
XHTML tag. I'm putting the greeting inside a level-one heading: 

print "<hl>Hi, $userName ! </hl> " ; 

The greetUser .php script is not meant to be run directly. It relies on 
askName . html. If you provide a direct link to greetUser . php, the pro- 
gram will run, but it will not be sent the username, so it will not work as 
expected. Do not place links to your PHP scripts unless you've designed 
them to work without input. 
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Choosing the Method of l/our Madness 

The key to server-side processing is adding method and action properties 
to your XHTML form. You have two primary choices for the method property: 
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♦ get: The get method gathers the information in your form and appends 
it to the URL. The PHP program extracts form data from the address. 
«J|he contents of the form are visible for anyone to see. 

^sst: The post method passes the data to the server through a mecha- 
nism called environment variables. This mechanism makes the form ele- 
ments slightly more secure because they aren't displayed in public as 
they are with the get method. 

Usinq get to send data 

The get method is easy to understand. View getRequest . php after it has 
been called from askName . html in Figure 3-4. Pay careful attention to the 
URL in the address bar. 











-Andy%20Harris * ^ l T l ►! O" 
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Figure 3-4: 

The address 
has been 
modified! 



Now: Ctaud*, 34 : F . 



The address sent to the PHP program has additional material appended to 
the end: 

http: //localhost/xfd/ar/xfd5 . 3_AR_AH/greetUser .php?userName=Andy%20Harris 

Most of this address is the (admittedly convoluted) address of the page on 
my test server. The interesting part is the section after greetuser .php: 



greetUser . php?userName=Andy%20Harris 
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This line shows exactly how the get method passes information to the pro- BookV 
gram on the server: Chapter 3 



iURL is extracted from the form action property. When the 

submit button is activated, the browser automatically creates a special ^ 

URL beginning with the action property of the form. The default gi 2| 

address is the directory as the original XHTML file. 3 S 

♦ A question mark indicates form data is on the way. The browser ^ 
appends a question mark to the URL to indicate form data follows. r- 

♦ Each field/value pair is listed. The question mark is followed by each 
field name and its associated value in the following format: 

URL?fieldl=valuel&field2=value2 

♦ An equal sign (=) follows each field name. Each field name is separated 
by the value of that field with an equal sign (and no spaces). 

♦ The field value is listed immediately after the equal sign. The value of 
each field follows the equal sign. 

♦ Spaces are converted to hexadecimal symbols, get data is transmitted 
through the URL, and URLS are not allowed to have spaces or other spe- 
cial characters in them. The browser will automatically convert all 
spaces in field names or values to the %2 0 symbol. Other special charac- 
ters (like ampersands and equal signs) are also automatically converted 
to special symbols. 

Sometimes, the spaces are converted to + signs, rather than %2 0. It isn't 
really that important, as the conversion is done automatically. Just know 
that URLs can't contain spaces. 

♦ Ampersand (&) is used to add a new field name/value pair. This partic- 
ular example (the URL created by askName . html) has only one name/ 
value pair. If the form had more elements, they would all be separated 
by ampersands. 



You don't have to do any of the URL formatting. It automatically happens 
when the user clicks the submit button. You'll also never have to decode all 
this, as PHP will do it for you. 

If you understand how the get method works, you can take advantage of it 
to send data to programs without the original form. For example, take a look 
at this address: 



http : / /www. google . com/search?q=dramatic%2 0chiprnunk 



If you type this code into your browser's location bar, you'll get the Google 
search results for a classic 5-second video. (If you haven't seen this video, 
it's worth viewing.) If you know a particular server-side program (like 
Google's search engine) uses the get protocol, and you know which fields 
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are needed (q stands for the query in Google's program), you can send a 
request to a program as if that request came from a form. 



n also write a link with a pre-loaded search query in it: 

<a href = "http : //www. google . com/search/q=dramatic%20chipmunk"> 

Google search for the dramatic chipmunk 
</a> 



If a user clicks on the resulting link, he would get the current Google search 
for the dramatic chipmunk video. (Really, it's a prairie dog, but "dramatic 
chipmunk" just sounds better.) 

Of course, if you can send requests to a program without using the intended 
form, others can do the same to you. You can never be 100-percent sure that 
people are sending requests from your forms. This can cause some prob- 
lems. Look at the next section for a technique to minimize this problem by 
reading only data sent via the post method. 




Using, the post method to transmit form data 

The get method is easy to understand because it sends all data directly in 
the URL. This makes it easy to see what's going on, but there are some down- 
sides to using get: 

♦ The resulting URL can be very messy. Addresses on the Web can 
already be difficult without the added details of a get request. A form 
with several fields can make the URL so long it is virtually impossible to 
follow. 

♦ All form information is user-readable. The get method displays form 
data in the URL, where it can easily be read by the user. This may not be 
desired, especially when the form sends potentially sensitive data. 



How did I know how to write the Google query? 



You might wonder how I knew what fields the 
Google engine expects. If the program uses 
get, just use the intended form to make a 
search and look at the resulting URL. Some 
practice and experience told me that only the 
q field is absolutely necessary. 



This trick (bypassing the form) could be con- 
sidered rude by some because it circumvents 
safety features that may be built into the form. 
Still, it can be helpful for certain very public fea- 
tures, like pre-loaded Google searches, or look- 
ing up weather data for a particular location 
through a hard-coded link. 
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♦ The amount of information that can be passed is limited. The Apache 
server (in its default form) will not accept URLs longer than 4,000 char- 
s. If you have a form with many fields or with fields that contain a 
data, you will easily exceed this limit. 



The answer to the limitations of the get method is another form of data 
transmission: the post method. 



BookV 
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Here's how it works: 

♦ You specify that the form's method will be post. You create the 
XHTML form in exactly the same way. The only difference is the form 
method attribute. Set it to post: 



<form action 
method 



"greetUser .php" 
"post"> 



♦ Data is gathered and encoded, just like it is in the get method. When 
the user clicks the submit button, the data is encoded in a format similar 
to the get request, but it is not attached to the URL. 

♦ The form data is sent directly to the server. The PHP program can still 
retrieve the data (usually through a mechanism called environment vari- 
ables), even though the data is not encoded on the URL. Again, you will 
not be responsible for the details of extracting the data. PHP makes it 
pretty easy. 

The post method is often preferable to get because 

♦ The URL is not polluted with form data. The data is no longer passed 
through the URL, so the resulting URL is a lot cleaner than one gener- 
ated by the get method. 

♦ The data is not visible to the user. Since the data is not presented in the 
URL, it is slightly more secure than get data. 

♦ There is no practical size limit. The size of the URL is not a limiting 
factor. If your page will be sending a large amount of data, the post 
method is preferred. 



^fi-STi/j^ With all these advantages, you might wonder why anybody uses get at all. 
- v ""*"" Really, there are two good reasons. The get approach allows you to embed 
requests in URLs (which can't be done with post). Also, get is sometimes a 
better choice for debugging because it's easier to see what is being passed 
to the server. 



Getting data from the form 

PHP includes a number of special built-in variables that give you access to 
loads of information. Each of these variables is stored as an associative 
array (see Chapter 5 of this minibook for more on associative arrays). These 
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special variables are available anywhere in your PHP code, so they're called 
superglobals. Here's a few of the most important ones: 



GET: A list of variables sent to this program through the get method 

♦ $_post: A list of variables sent to this program through the post method 

♦ $_request: A combination of $_get and $_POST 

You can use these variables to look up information posted in the form. For 
example, the askName . html page contains a field called userName. When 
the user views this page, it sends a request to greetuser . php via the get 
method, greetuser .php can then check its $_get variable to see if a field 
named userName exists: 

$userName = $_GET [ "userName" ] ; 

This line checks all the data sent via get, looks for a field named userName, 
and copies the contents of that field to the variable $userName. 

If you want to retrieve a value sent through the post method, use this 
variation: 

$userName = $_POST [ "userName" ] ; 

If you don't care whether the data was sent via get or post, use $_request: 

$userName = $_REQUES [ "userName" ] ; 

The $_request superglobal grabs data from both get and post requests, 
so it works, no matter how the form was encoded. Many programmers use 
the $_request technique because then they don't have to worry about the 
encoding mechanism. 



If you don't like the idea of somebody accessing your data without a form, 
use $_POST in your PHP program. If data is encoded in the URL, your pro- 
gram ignores it because you're only responding to post data, and data 
encoded in the URL is (by definition) get data. 




This solution is far from foolproof. There's nothing to prevent a bad guy from 
writing his own form using the post method and passing data to your pro- 
gram that way. You can never be 100-percent safe. 



Retrieving Data from Other Form Elements 

It's just as easy to get data from drop-down lists and radio buttons as it is to 
get data from text fields. In PHP (unlike JavaScript), you use exactly the 
same technique to extract data from any type of form element. 
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to form variables? 



The earliest forms of PHP had a feature called 
register_globals which automatically 
did the $_request extraction for you. If your 
program comes from a userName field, 
the program will "magically" just have a 
$userName variable pre-loaded with the 
value of that field. While this was a very con- 
venient option, evildoers soon learned how to 
take advantage of this behavior to cause all 
kinds of headaches. Convenient as it may be, 
the register_globals feature is now 



turned off on most servers and isn't even 
available on the next version of PHP. The 
$_request approach is safer and not much 
harder. If you want even more control of how 
information is passed to your programs, inves- 
tigate the filter functions that are in the 
latest versions of PHP. They are not quite com- 
plete (as of this writing), but by the time PHP6 
rolls around, they'll probably become an even 
better way to extract data from forms. 



Building a form With complex elements 

For an example of a more complex form, look over monty . html in Figure 
3-5. This program is a tribute to my favorite movie of all time. (You might 
just have to rent this movie if you're really going to call yourself a program- 
mer. It's part of the culture.) 



file Edt Vew rtstory Bookmarks Tools 



• - ^ L^? E http:/Ma^ost/xfd/ar/xf(ir3_Aft_AH/n-onlY.hOnl | T |"p»1 C 



Figure 3-5: 

The Monty 
Python quiz 
features a 
drop-down 
list, radio 
buttons, and 
check 
boxes. 



Monty Python Quiz 





^Tiat is your name? 






Arthur. King of the Britons 


r 












What is your quest -1 


0 To chop down the mightiest tree in the forest with a herring 








O I seek the holv exail 








@ I'm looking for a slirubbery 






How can you tell she's a witch 0 


□ She's got a witch nose. 








□ She has a witch hat. 








She turned me into anew!. 








| Submit 





rs/0 warnings O & 



Now: Cloudy, 34° F Fri: 30° F Sat 34° F £^ 
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The XHTML form poses the questions. (Check out Book I, Chapter 7 for a 
refresher on XHTML forms, if you need it.) Here's the code: 



PE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
7/www.w3 .org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv=" content- type" content=" text/xml ; charset=utf -8 " /> 
<title>monty .html</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "monty. ess " /> 

</head> 



<body> 

<hl>Monty Python Quiz</hl> 
<form action = " monty . php " 
method = "post"> 
<f ieldset> 
<p> 

<label>What is your name?</label> 
<select name = "name"> 



<option value = "Roger"> 

Roger the Shrubber 
</option> 

<option value = "Arthur "> 

Arthur, King of the Britons 
</option> 

<option value = "Tim"> 

Tim the Enchanter 
</option> 
</select> 
</p> 



<p> 

<label>What is your quest?</label> 
<span> 

<input type = "radio" 

name = "quest" 

value = "herring" /> 

To chop down the mightiest tree in the forest 
with a herring 
</span> 
<span> 

<input type = "radio" 
name = "quest" 
value = "grail" /> 

I seek the holy grail. 
</span> 
<span> 

<input type = "radio" 
name = "quest" 
value = "shrubbery" /> 
I'm looking for a shrubbery. 
</span> 
</p> 



<p> 
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<label>How can you tell she's a witch?</label> 
<span> 
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<input type = "checkbox" 
name = "nose" 
value = "nose"/> 




She's got a witch nose. 



</span> 
<span> 



<input type = "checkbox" 
name = "hat" 
value = " hat " / > 



She has a witch hat. 



</span> 
<span> 



<input type = "checkbox" 
name = "newt" 
value = "newt" /> 



She turned me into a newt . 



</span> 



</p> 



<button type = " submit "> 

Submit 
</button> 



</f ieldset> 
</form> 
</body> 
</html> 

There's nothing too crazy about this code. Please note the following features: 

♦ The action attribute is set to monty .php. This page (monty . html) 
will send data to monty. php, which should be in the same directory on 
the same server. 

♦ The method attribute is set to post. All data on this page will be passed 
to the server via the post method. 

♦ Each form element has a name attribute. The name attributes will be 
used to extract the data in the PHP program. 

♦ All the radio buttons have the same name value. The way you get radio 
buttons to work together is to give them all the same name. While they 
all have the same name, each has a different value. When the PHP pro- 
gram receives the request, it will get only the value of the currently 
selected radio button. 

♦ Each check box has an individual name. Check boxes are a little bit dif- 
ferent. Each check box has its own name, but the value is sent to the 
server only if the check box is currently checked. 

I don't cover text areas, passwords fields, or hidden fields here because, to 
PHP, they are just like text boxes. Retrieve data from these elements just like 
you do for text fields. 
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Responding to a complex form 

IThemonty . php program is designed to respond to monty . html. You can 
J \ C] fj f| fj fj IdeeS&espond when I submit the form in monty . html, as shown in Figure 3-6. 

It's no coincidence that monty .html uses monty . ess and calls 
monty.php. I deliberately gave these files similar names so it will be easy to 
see how they fit together. 




Figure 3-6: 
The 

monty.php 
program 
responds to 
the Monty 
Python quiz. 



<S monty.php - Mozilla Firefox 

File Edt View History Bookmarks Tools Help 












■yp - - (j^ |_4f |E1 http://ocalriost/xfd/ar/xfcl5.3_AR^AM/montY.php 




**. 




Monty Python quiz results 












Your name is Arthur 
Your quest is shrubbery. 
She's a witch! 


























0 errors / 0 warnings Q 


^ £ Now; Cloudy, 34°F 


Ft); 30' F 


.■O j Sat 



This program works like most PHP programs: It loads data from the form 
into variables and assembles output based on those variables. Here's the 
PHP code: 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>monty .php</title> 
<!-- Meant to run from monty.html --> 
</head> 

<body> 

<hl>Monty Python quiz results</hl> 
<?php 

//gather the variables 
$name = $_REQUEST [ "name" ] ; 
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$quest = $_REQUEST[ "quest" ] ; Book V 

$nose = $_REQUEST["nose"] ; Ph=,ntor-J 
$hat = $_request [ "hat " ] ; l*napter i 



$_REQUEST[ "newt" 



end some output ^ 

$reply = <« HERE J? 

-n £ 

<p> o = 

Your name is $name . 3 ^ 

</p> w 3: 

—I 

3 

<p> 1— 

Your guest is $quest. 

</p> 



HERE ; 

print $reply; 



//determine if she's a witch 
$witch = false; 
if ($nose != " " ) { 

$witch = true; 
} // end if 



if ($hat != 11 11 ) { 
$witch = true; 
} // end if 



if ($newt != " " ) { 

$witch = true; 
} // end if 



if ($witch == true) { 

print "<p>She's a witch !</p> \n"; 
} // end if 

?> 



</body> 
</html> 



If you want to respond to a form with multiple types of data, here's how it's 
done: 

7. Begin with the XHTML form. 

Be sure you know the names of all the fields in the form, as your PHP 
program will need this information. 

2. Embed your PHP inside an XHTML framework. 

Use your standard XHTML framework as the starting point for your PHP 
documents, too. The results of your PHP code should still be standards- 
compliant XHTML. Use the <?php and ?> symbols to indicate the pres- 
ence of PHP code. 



3. Create a variable for each form element. 
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Use the $_request technique described in the "Receiving data in PHP" 
section of this chapter to extract form data and store it in local variables: 



//gather the variables 
$name = $_REQUEST [ " name " ] ; 
$quest = $_REQUEST [ "quest" ] 
$nose = $_REQUEST [ "nose" ] ; 
$hat = $_REQUEST [ "hat " ] ; 
$newt = $_REQUEST [ 11 newt " ] ; 



If. Build your output in a heredoc. 

PHP programming almost always involves constructing an XHTML docu- 
ment influenced by the variables that were extracted from the previous 
form. The heredoc method (described in Chapter 2 of this minibook) is 
an ideal method for packaging output: 

//send some output 
$reply = <<< HERE 

<p> 

Your name is $name. 

</p> 

<p> 

Your quest is $quest. 
</p> 



HERE; 

print $reply; 

5. Check for the existence of each check box. 

Check boxes are the one exception to the "treat all form elements the 
same way" rule of PHP. The important part of a check box isn't really 
its value. What you really need to know is whether the check box is 
checked or not. Here's how it works: If the check box is checked, a name 
and value are passed to the PHP program. If the check box is not 
checked, it's like the variable never existed: 

a. Create a variable called $witch set to false. (We'll assume inno- 
cent until proven guilty in this witch hunt.) 

Each check box, if checked, would be proof that she's a witch. If the 
field was not passed (which will happen if the check box is not 
checked), the resulting variable will be empty (" ")• 

b. Check each check box variable. If it's not empty, the correspon- 
ding check box was checked, so she must be a witch (and she must 
weigh the same as a duck — you've really got to watch this movie). 

After testing for the existence of all the check boxes, the $witch 
variable will still be false if none of the check boxes were checked. 
If any combination of check boxes is checked, $witch will be true: 
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//determine if she's a witch 
$witch = false; 
if ($nose != ""){ 

$witch = true; 
} // end if 

if ($hat != ""){ 
$witch = true; 
} // end if 

if ($newt != ""){ 

$witch = true; 
} //end if 
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if (Switch == true) { 

print "<p>She's a witch!</p> \n" 
} // end if 
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Chapter 4: Control Structures 
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In This Chapter 

W Getting familiar with if -else conditionals 

W Using switch structures 

C* Working with while and for loops 

V Using comparison operators 

Control structures allow you to make decisions or control the order of 
execution of your program, if -else conditionals, case statements, 
for loops, and while loops are all control structures. 

Introducing if-etse Conditionals 

If you have two or more courses of action to choose from in your program, a 
perfect way to handle this is through if -else conditionals. 

if conditionals 

The simplest form of a control statement is the if conditional, also known 
as an if statement or an if construct. 

An if conditional evaluates an expression down to its True or False value. 
If the value is equal to True, some code will be executed. If the value is 
False, the code won't be executed. 

Here's how you construct an if conditional: 

/. Start with if. 

2. Follow this with a condition expression in parentheses, ( ) . 

3. Follow this with the code to be executed if the expression is met. 

This code must be surrounded by curly braces. 
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The simplest form of an if conditional uses a variable that you expect to 
contain the value True or False (known as a Boolean variable) as the 
sion to be evaluated by the if statement: 

sion = true; 

if ($expression) { 
print "true! " ; 

} 




This code would print true ! . 



If you wanted to check $expression to see if it was equal to False, you 
could precede it with an exclamation point: 



$expression = true; 



if ( ! $expression) { 
print " false ! " ; 

} 



In this case, nothing would print as a result of the execution of this code 
because $expression is set to True. 

The if conditional also evaluates to True if a variable simply exists and 
isn't equal to the Boolean values True or False. So, the following code 
would evaluate to True because I'm using the string " false " instead of the 
Boolean False: 

$expression = "false"; 

if ($expression) { 
print "true" ; 

} 




Be careful when setting Booleans to True or False. If you put quotes 
around either True or False, the value won't be treated as a Boolean, but 
rather as a string. 



Beyond checking to see whether variables exist or are equal to the Boolean 
values True and False, you can use an if statement to compare two or 
more variables. 



The most common form of comparison is the check for equality. When 
checking for equality, use a double equal sign (==), not a single one (=). 
Single equal signs assign (a sign assigns!), whereas double equal signs com- 
pare (one sign for each value!). 

So, this code would always evaluate to True and print 2 , even though it's 
obvious to you that that is not what you intended: 
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$var = 1; 
if |$var = 2) { 

" $ var " ; 
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Here's a dice-rolling game where the user tries to roll a six. You'll use an if 
conditional to make sure the $userNuniber variable exists and another to 
determine whether the user wins (see Figure 4-1 for the output): 

<hl>Dice Rolling Game</hl> 

<p>Welcome to the dice rolling game. See if you can roll a six!</p> 
<?php 

$userNumber = rand (1,6); 

if ($userNumber) { 

print "<pximg src=\ "die$userNumber .png\ " /></p>"; 

if ( $userNumber == 6){ 

print "<p>You rolled a six!</p>"; 

} 

} 

?> 

<pxa href=" if Conditional .php">Try Again!</ax/p> 
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Figure 4-1: 
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Each time you come to the page, it chooses a random number from 1 to 6 
and then evaluates that number to see if you rolled a six. If you did roll a six, 
lays the special "You rolled a six!" message. 



Notice that the code inside the curly braces runs only if the condition inside 
the parentheses is met. Otherwise, it just skips right to the closing curly 
brace and resumes from there. 



In this case, checking whether the $userNumber variable existed isn't really 
necessary because you set it immediately before you checked it. However, if 
the $userNumber variable came from a form submitted to this page, ensur- 
ing that the $userNumber variable was submitted successfully would be a 
good idea. 



else conditionals 

When writing if conditionals, it's good practice to always include at least 
one else conditional. 



When evaluating a Boolean to see if it equals True, the else conditional 
would function as the code that would execute if the Boolean is equal to 

False: 



$expression = false; 

if ($expression) { 
print "true"; 

}else{ 

print "false"; 

} 



This code would print false because the expression is equal to the Boolean 
value False. 



Conversely, just as you checked for the variable to equal False instead of 
True, the else conditional would function as the check for True in the fol- 
lowing statement: 



$expression = true; 

if ( ! $expression) { 
print "false"; 

}else{ 

print "true"; 

} 



This code would print true. 
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erse conditional in the 8-ball 
program. This should never execute; but if it did 
for some reason, you're letting the user know 
what to do. In this case, you're giving the user 
an error code to send back to you that you can 
recognize. In this example, 8BIC stands for 8- 
ball if conditional. It's followed by the value 
$yourNumber so that you'll have enough 
information to begin your investigation into why 
the error occurred. 

It's really up to you as to what you want to 
happen here, and it wouldn't be very good 
practice to print an error code to the user every 
time things didn't go the way you expected. 
However, forthe 8-ball program — because the 
if statement really is the entire program — 
you might consider printing the error code. 
More realistically, however, you'd probably 
want to arbitrarily hard code a valid number 
and print the picture for that number. Who 
cares if it isn'tthe numberthat got rolled? 



When printing errors to the user, think about 
how important it is that the user lets you know 
the error occurred. Is there some default value 
you could've shown the user or some default 
behavior you could've executed, leaving the 
user none the wiser and ultimately happy? 
Errors degrade faith in your program. How 
excited would you be about making a credit 
card purchase on a site that constantly spit 
errors every time a tiny thing happened that you 
didn't care about? 

A good solution for this 8-ball program may be 
to swallow the error and never let the user 
know anything went wrong. Instead, you can 
have the program e-mail an error report with 
relevant information to you. Even this solution 
is extreme overkill, though, because it really 
doesn't matter how many times that else 
runs, as long as the user doesn't realize it. It 
only becomes a problem if else runs every 
time, but you'd probably notice that during your 
testing phase. 



else conditionals can be stacked with ifs, so you can include as many as 
you want. If you're following an else with an if, you can write the else 
statement as elseif or else if . I prefer else if over elseif simply 
because it looks better to me. 

Here are basically the two rules to remember with else: 

♦ The else conditional goes right after the closing curly brace and can be 
immediately followed by a new if conditional. 

♦ The final else conditional can simply be followed by another opening 
curly brace. This else is executed only if none of the if conditionals 
are met. 

Here's a magic 8-ball game that gives you a different outcome dependent 
upon a random number (see Figure 4-2 for the output): 

<?php 



$yourNumber = rand (1,8) 
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if ( $yourNumber 



1) { 
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print " <pxirrig src— 


\ oDalll 


png\ " 


/></ p> " ; 


} else i f { $yourNumber = = 


2 ) { 






^^TStLnt " <pximg src- 


\ " RVi=j 119 


„ 

png\ " 


/ ></p> " ; 


j^J- &s V £ ( $you]f Number = - 


3 ) { 






print "<pximg src = 


\ " 8bal 13 


png\ " 


/></p> " ; 


}else if ( $yourNumber == 


4) { 






print "<pximg src= 


\"8ball4 


png\ 11 


/></p>" ; 


}else if ( $yourNumber == 


5) { 






print "<p><img src = 


\"8ball5 


png\ 11 


/></p>" ; 


}else if ( $yourNumber == 


6) { 






print "<pximg src= 


\"8ball6 


png\ 11 


/></p>" ; 


}else if ($yourNumber == 


7) { 






print "<pximg src= 


\"8ball7 


png\ 11 


/></p>" ; 


}else if ( $yourNumber — 


8) { 






print "<pximg src= 


\"8ball8 


png\ 11 


/></p>" ; 


}else{ 









print "An error has occurred. Please try again, or contact 
support@somesite.com for assistance. Error code: 8BIC : $yourNumber" 



} 

?> 



<a href="ifElse.php">Ask another question! </a> 




Figure 4-2: 

The results 
of the 
ifElse.php 
code. A 
simple 8-ball 
simulator. 
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Comparison operators 

|""N ["^ Ttlere are many ways to test variables to see if they're equal to, less than, 

J |fj fj IJ f^wQei^ian, or not equal to certain text, numbers, or even other variables, 
1 ^ l — / W Ms'slToVn in the following: 

♦ ==: Checks for equality 

♦ ! =: Checks for inequality 

♦ <: Checks to see if the value on the left is less than the value on the right 

♦ >: Checks to see if the value on the left is greater than the value on the 
right 

♦ <=: Checks to see if the value on the left is less than or equal to the 
value on the right 

♦ >=: Checks to see if the value on the left is greater than or equal to the 
value on the right 

Remember, these comparisons work on any sort of data, not just numbers. 
You can compare letters from the alphabet, as shown here: 

if ("a" < "b") 

This would evaluate to True because a comes before b in the alphabet, and 
thus is smaller. 

Here's a program that rolls two ten-sided dice to get a percentile. Through a 
series of if-else statements, the program determines what happens, based 
on your roll, by using comparison operators (feel free to get the code from 
the CD-ROM, rather than typing it all — Figure 4-3 shows the output): 

<?php 

$tensDie = rand (1, 10) ; 
$onesDie = rand (1, 10) ; 

print "<pximg src=\ " 10sided$tensDie .png\ " /ximg src=\ "10sided$onesDie .png\ " 
/xbr />"; 

if($onesDie == 10) 

$onesDie = 0;//if ones die == 10, make it zero. 

if ($tensDie == 10) { 

if ($onesDie != 0) { 

print "You rolled a $onesDie</p>" ; 
}else{ 

print "You rolled 100!</p>"; 

} 

}else{ 

print "Your rolled $tensDie$onesDie</p> " ; 

} 
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Figure 4-3: 

A fortune 
teller 
program, 
using ten- 
sided dice 
to determine 
your fate. 
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print "<p>" ; 

if ($tensDie ! = 10) { 

if ($tensDie <= 4) { 

print "Your project is a failure. It is $tensDie years late and " . 
$onesDie . 

"00% over budget before it finally gets canceled. All of your co-workers 

are 

disgruntled and send each other's code to worsethanfailure.com"; 
}else if($tensDie <= 7){ 

print "Your project is only a partial success. It is " . $tensDie * 3 . " 
months 

late and 11 . $onesDie . "0% over budget. It is never incredibly 
successfully 

implemented, but it puts food on the table."; 
}else if($tensDie < 9){ 

print "Your project is a success. It is only $tensDie weeks late and has 

$onesDie . "% of the features originally planned, but it survives through 

{$tensDie + $onesDie) . 11 more releases before it is obsolete."; 
}else{ 

print "Your project is a huge success! "; 
if ($onesDie == 9) { 

print " It is purchased by Google, and you are snatched up along with 

it. You 

lucky entrepreneur you . . . " ; 
}else{ 

print " It remains an industry standard for the next $onesDie years, 

making 

you filthy rich."; 

} 
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} 

} else { 

if ($onesDie == 0) { 

print "When you were born, your mother christened you \ "William 
\ " , and the 
rest is history."; 
}else{ 

print "Someone burns your office down and you lose your job. Better 
luck next 
time. " ; 

} 

} 

print "</p>" ; 

?> 

<a href="ifComparison.php">Try Again!</a> 



Logical operators 

You can cram as many comparisons as you want into the if statement. You 
simply need to separate the comparisons with logical operators, such as the 
following: 

♦ and or &&: Either can be placed between two conditionals to make sure 
both conditions are met. 

♦ OR or | | : Either can be placed between two conditionals to make sure at 
least one is met. 

♦ xor: Can be placed between two conditionals to make sure at least one 
is not met. 

These logical operators go right inside the parentheses with the expressions: 

if ("a" < "b" || 1 == 2) 

Because you need only one of the expressions to evaluate to True (with an 
OR logical operator), this code evaluates to True because even though 1 is 
not equal to 2 , a is less than b. However, if I replaced OR with and: 

if ("a" < "b" && 1 == 2) 

This would evaluate to False because both expressions on either side of 
and don't evaluate to True. 

You can go pretty crazy with all the logical operators if you want (using 
parentheses to organize them), much the way you would an equation in 
math, as shown in the following (see Figure 4-4 for the output): 

<hl>Spacewar ! < /hl> 

<p>It is 1962 . You are Steve Russell hard at work on your DEC PDP-1 Computer 
trying to invent the very first computer game, "Spacewar! "</p> 
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<p>Everything would be going great if only you could get the Cathode-Ray Tubes to 
work. There are two that are giving you trouble. They are getting either too 
much, or too little power, but you just need one to work to play the game. 

Sy restarting until one works !</p> 

//set random power level 
Scrtl = rand (1, 10) ; 
$crt2 = rand (1, 10) ; 

print «<HERE 

<p>Your CRTs (need one to be green) :<br /> 
<img src="crt$crtl .png" /> 
<img src="crt$crt2 .png" /></p> 
HERE; 

//see if one crt 1 s power levels is between 4 and 6 (inclusive)... 
if(($crtl >= 4 && $crtl <= 6) || ($crt2 >= 4 && $crt2 <= 6)){ 

print "<p>SPACEWAR!<br /ximg src=\ "computerOn.png\ " /></p>"; 
}else{ 

print"<p>No Go... <a href =\ " if Logical .php\ ">Try again</a> . . . <br /ximg 
src = \ " computerOf f .png\ " /></p>" ; 

} 

?> 
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Figure 4-4: 

The first 
computer 
game. Can 
you get it to 
work? 
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It is 1962 You are Steve Russell hard at work on your DEC PDP-1 Computer trying to invent the very first computer game, "Spacewar!" 

Everything would be going great if only you could get the Cathode-Ray Tubes to work. There are two that are giving you trouble. They are getting either too much, or 
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This really optimizes your if statements. Without the logical operators, this BookV 
same code would've taken about five if statements: Chapter 4 



>= 4){ rs 



rtl <= 6) { 

print"<p>SPACEWAR! <br /ximg src=\ "computerOn.png\ " /></p>"; 
}else if ($crt2 >= 4) { 
if ($crt2 <= 6) { 

print " <p>SPACEWAR ! <br /ximg src=\ "computerOn.png\ " /></p>"; 
}else{ 

print"<p>No Go... <a href =\ " ifLogical .php\ ">Try again</a> . . . <br 

/ximg 

src=\"computerOff .png\" /></p>" ; 

} 

} 
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Comparing With switch Structures 

The switch statement is a great replacement for an if conditional if you 
have a single variable that you want to compare to a set number of values by 
using the double equal sign (==) comparison. 

Here's how you construct the switch statement: 

/. Start with the keyword switch. 

2. Add the variable you wish to evaluate in parentheses, ( ) . 

In this example, $theVar is the variable. 

3. Insert a pair of curly braces ({ }). 

if. Put the case statements inside the curly braces, beginning with case. 

5. Add the value to test the variable against. 

In this example, 1, b, and False are all values to test the variable 
against. These values are like the value on the right side of an if com- 
parison, whereas the variable ($theVar, in this example) is like the vari- 
able on the left side of an if comparison. 

6. Enter the code to run if the variable test evaluates to True. 

7. Add the break statement to exit the switch structure. 

8. Put as many case statements as you want until you've exhausted all 
of the reasonable possibilities you think might occur. 

If you are rolling a six-sided die, for example, you would test for numbers 
1 to 6 because those are reasonable possibilities. 

9. (Optional) Include a default clause. 
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Loose comparisons with switch 



'itcn~3ratement uses loose compar- 
isons to check for equality. Basically, this 
means that it's a lot less strict about whether 
the two values are equal. For instance, with 
loose comparison, the following: 

true == 1 

evaluates to True. Whereas with strict com- 
parisons, the same statement would evaluate 

to False. 



For more on strict versus loose comparisons, 

see http://us2.php.net/manual/ 
en/types . comparisons .php#types . 
compar is ions -loose. 



You can compare against numbers, text, Booleans, or all three: 

switch ($theVar) { 
case 1 : 

//do something 

break; 
case "b" : 

//do something 

break; 
case false: 

//do something 

break; 
default : 

//do something 

} 

Don't forget the break statement, or every single line following the first 
statement that evaluates to True will run! Try commenting the break state- 
ments out of the magic 8-ball code following the next paragraph to see for 
yourself. 

Look at this modified version of the 8-ball program from earlier in this chap- 
ter to see how the case statement can simplify your programs: 

<p>Ask the magic 8 ball a yes or no question! </p> 
<?php 

$yourNumber = rand (1,8) ; 

switch ( $yourNumber) { 
case 1: 

print "<pximg src = \ "8balll .png\ " /></p>"; 
break; 
case 2 : 

print "<pximg src = \ " 8ball2 .png\ " /></p>"; 
break; 
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ryOTH/eirniowEcrwong so far, you simplified 
the 8-ball program with case statements 
instead of if -else statements. Is there any- 
thing else you could do that would simplify it 
more? 

The most efficient version of the 8-ball program 
functions without ifs or cases and is only 
two lines of PHP code: 

SyourNumber = rand (1,8) ; 
print "<pximg 

src=\ " 8ball$yourNumber .png\ " 

/></p>" ; 

Often, you'll find that if you're doing something 
extremely complicated with lots of nested ifs, 
you're probably doing something wrong. Many 
new programmers use if statements for 



everything because if your only tool is a 
hammer, everything looks like a nail. 

After you expand your toolbox with tools such 
as arrays, multidimensional arrays, and simple 
solutions like the one shown in this sidebar, 
you'll find that you write fewer and fewer if 
statements. Very rarely do you write long, com- 
plex i f statements like the ones shown in this 
chapter. 

Note: if statements aren't really considered 
harmful, that was just a catchy title based on a 
common phrase in computer science popular- 
ized by a 1968 letter written about GOTO state- 
ments. For more on this topic, see http : / / 
blog . chomperstomp . com/ ?p=110. 



case 3 : 

print "<pximg src = \ " 8ball3 .png\ " /></p>"; 
break; 
case 4 : 

print "<pximg src = \ "8ball4 .png\ " /></p>"; 
break; 
case 5: 

print "<pximg src = \ "8ball5 .png\ " /x/p>"; 
break; 
case 6 : 

print "<pximg src = \ " 8ball6 .png\ " /x/p>"; 
break ; 
case 7 : 

print "<pximg src=\ " 8ball7 .png\ " /x/p>"; 
break; 
case 8: 

print "<pximg src=\ "8ball8 .png\ " /x/p>"; 
break; 
default : 

print "An error has occurred. Please try again, or contact 
support@somesite.com for assistance. Error code: 8BIC : $yourNumber" ; 

} 



?> 



<a href="switch.php">Ask another question! </a> 
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Looping It Up With Loops 

times, you'll find that you want the computer to repeat a certain task, 
ay to do this is through loops. 

White (oops 

Loop structures rely heavily on if statements. In fact, the while loop looks 
exactly like an if statement with the word //replaced with the word while. 
The only difference is that whereas if executes only once, while continues 
to repeat until it evaluates to False. 

So, this code could go on forever unless something inside the curly braces 
set $theVar to False: 

$theVar = true; 

while ($theVar) { 

//do something 

} 

Look back at the dice-rolling program earlier in this chapter (refer to Figure 
4-1). Instead of clicking Try Again! for every roll, you could easily modify this 
program to simply roll the dice until you get a six (see Figure 4-5 for the 
output): 

<hl>Dice Rolling Game 2</hl> 

<p>Welcome to the dice rolling game. See how many rolls it takes to get a 
six! </p> 

<?php 

while ($userNumber != 6){ 

$userNumber = rand(l,6); 

print "<pximg src = \ "die$userNumber .png\ " /></p>"; 

} 

print "<p>You rolled a six!</p>"; 

?> 

<pxa href = "while. php">Try Again!</ax/p> 

for loops 

A for loop is really just a convenient while loop. With while loops, you 
have to initialize the variable, create the while loop with the if expression, 
and then remember to make the expression evaluate to True: 

$theVar = 0; 

while ($theVar < 10) { 
//do something 
$theVar++; 

} 
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Figure 4-5: 

The dice 
keep rolling 
until you get 
a six! 
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for loops take care of all this in a nice succinct, compact way in the expres- 
sion area of the loop: 

for($theVar = 0; $theVar < 10; $theVar++) { 
//do something 




Each time PHP gets to the end of the loop (the last curly brace), it jumps 
right back to the beginning if the expression still evaluates to False, and it 
increments $theVar by 1. 

Here's what the for loop is doing: 

$theVar = 0 ,- 

if ($theVar < 10) { 

//do something 

$theVar++; 

} 

//go back to the first if 

So, you can see it's basically just a conveniently structured while loop. 

You can make the loop increment by any value you like; it doesn't have to 
just be by 1. 
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If you made the dice-rolling game for the while loop in the preceding sec- 
tion, you made it keep rolling until it rolled a six. What if, instead, you 
a*^d it simply to roll the dice 100 times and see how many times you 
gj)a six? This would be extremely easy to do with a for loop (see Figure 
for the output): 

<hl>Dice Rolling Game 2</hl> 

<p>Welcome to the dice rolling game. See how many rolls it takes to get a 
six! </p> 

<p> 
<?php 

$sixCount = 0; 

for ($i = 0; $i < 100; $i++) { 
$userNumber = rand(l,6); 

print "<img src=\ "die$userNumber .png\ " />"; 
if ( $userNumber == 6) { 
$sixCount++ ; 

} 

} 

print "<p>You rolled $sixCount six (es ) ! </p>" ; 

?> 

</p> 

<pxa href="for.php">Try Again ! </ax/p> 
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Figure 4-6: 

100 dice 
rolls with a 
count of the 
number of 
sixes rolled. 
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More on control structures 



Here are a few more control structures that I 
haven't discussed yet in this chapter: 

«*" do-while: Exactly like while, except 
that the if conditional is evaluated at the 
end of the loop, rather than at the begin- 
ning. This ensures thatthe loop executes at 
least once, whereas with while, there's a 
chance it won't execute at all. 

f oreach: This works only on arrays; I 
cover this in Chapter 5 of this minibook. 

\^ continue: This is used within the loop 
structure to skip the remaining code and 
move to the next iteration of the loop. 

declare: declare constructs are used 
to set an execution directive for blocks of 
code. You'll probably won't use this often. 

return: Called from within a function. 

require: Includes and evaluates a spe- 
cific file and kills the program if the file 
doesn't exist. 



V include: Includes and evaluates a spe- 
cific file. 

require_once: Same as require, 
except that if the file has already been 
included, it won't be included again. 

include_once: Same as include, 
except that if the file has already been 
included, it won't be included again. 

These control structures aren't quite as preva- 
lent asthe ones covered in this chapter, but you 
may still run across them every now and then. 

For more detail and alternative syntaxes for con- 
trol structures, check out the PHP manual online 

athttp: //us2 .php.net/manual/en/ 
language . control-structures .php. 
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As you can see, the structure of the for loop is 

for (expression!; expression2 ,- expressions ) 
//do something 

Here's what each part of the code is doing: 

♦ First expression: Executes exactly once at the beginning of the for 
loop. This is where you initialize variables. 

♦ Second expression: Evaluates at the beginning of each iteration of the 
loop until it evaluates to False, at which point, the loop ends. 

♦ Third expression: Executes at the end of each iteration of the loop. 
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Within each of these expressions, you can place multiple expressions sepa- 
rated by commas. In this way, you can modify your dice-rolling program to 

Isifna^jfy the six count by putting the initialization of the $sixCount variable 

pfrsg^ the for loop in the expression! place: 

for ($i = 0, $sixCount = 0; $i < 100; $i++) { 

All the expressions places are optional. If you leave them empty, the loop 
will still work. Leaving expression.2 empty simply causes the loop to run 
forever unless you exit it with a break directive. Take a look at this modified 
version of the dice-rolling program. I leave the expression2 slot empty and 
manually exit the loop if either the dice-roll count exceeds 100 or you roll 
more than 20 sixes (see Figure 4-7 for the output): 

<hl>Dice Rolling Game 3</hl> 

<p>Welcome to the dice rolling game. See how many rolls it takes to get 20 sixes. 
You can roll the dice up to 100 times !</p> 

<p> 
<?php 

for ($i = 0, $sixCount = 0; ; $i++) { 
$userNumber = rand(l,6); 

print "<img src=\ "die$userNumber .png\ " />"; 

if ( $userNumber == 6) { 
$sixCount++ ; 

} 

if($i > 99 || $sixCount > 19) { 
break: 

} 

} 

print "<p>You rolled the dice $i times, and rolled $sixCount six (es) ! </p> " ; 
if ($sixCount < 20) { 

print "<h2>You failed to roll 20 sixes !!! </h2> " ; 

} 

?> 

</p> 

<pxa href="forBreak.php">Try Again!</ax/p> 

You can do some amazing things with loops, and they'll be one of the most 
important tools in your toolbox, especially when using arrays (see Chapter 5 
of this minibook for more about working with arrays). 
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Figure 4-7: 

Roll the dice 
100 times 
and try to 
get more 
than 20 
sixes. 
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Chapter 5: Working With Arrays 

DropBooks — 

In This Chapter 

V Creating one-dimensional arrays 

v Making the most of multidimensional arrays 

C* Using for each loops to simplify array management 

v* Breaking a string into an array 

f 

■ n time, arrays will become one of the most important tools in your tool- 
«S box. They can be a bit hard to grasp for beginners, but don't let that stop 
you. Arrays are awesome because they allow you to quickly apply the same 
instructions to a large number of items. 

In PHP, an array is a variable that holds multiple values that are mapped to 
keys. Think of a golfing scorecard. You have several scores, one for each 
hole on the golf course. The hole number is the key, and the score for that 
hole is the value. Keys are usually numeric, but values can be any type. You 
can have an array of strings, numbers, or even objects. 

Using One-bimensionat Arrays 

The most basic array is a one-dimensional array. It's just one container with 
slots, and each slot has only one variable in it. In this section, you find out 
how to create this type of array and fill it. 

Creating an array 

Array creation is pretty simple. First, you need to create a variable and then 
tell PHP that you want that variable to be an array: 

$theVar = array(); 

Now, $ theVar is an array. However, it's an empty array waiting for you to 
come along and fill it. 




Technically, you can skip the variable creation step. It's still a good idea to 
explicitly define an array because it helps you remember the element is an 
array, and there are a few special cases (such as passing an array into a 
function) where the definition really matters. 
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Fitting an array after creation 

|An array is a wonderful thing after you put something in it. Here are the 
J \ Cj fj f| fj fj ItCrKways you can fill an array after you create it: 

♦ Reference a numerical index and place something in that slot of the array. 



♦ Specify an index and place something in that slot of the array. 
4- Take the next highest available numerical index greater than zero. 

Take a look at the following: 



$theVar [0] 
$theVar [] 



"something" ; 



4; 



If you were paying close attention, you'll notice that I used 0 as my first 
array index. That's because computers start counting from zero, and now 
you do, too! So, in the example, index 0 holds the value something and 
index 1 holds the value 4. 




When filling an array, if you don't specify an index, it simply takes the next 
highest index equal to or greater than zero and places the value there. 
Because I didn't specify an index for the number 4, it looked at the current 
numbered indices it had (which was index 0) and took the next highest num- 
bered index (which was index 1) and placed 4 inside that index. If you had 
indices 0, 5, 6, and 27, the next highest numbered index would be 2 8. 



fitting an array upon creation 

You can fill an array upon creation by placing values, separated with 
commas, inside the parentheses, as shown here: 



$theVar = array (" one " , $two, 3); 



This creates an array whose 0th index is filled with the string one, the 1st 
index is filled with the variable $two, and the 2nd index is filled with the 
integer 3. You can explicitly define which index gets what by using little 
arrows: 



$theVar = array (2 => "one", 0 => $two, 4 => 3 ) ; 



Now, you have an array with the 0th index equal to the variable $two, the 
2nd index equal to the string one (note that there's no 1st index, or rather, 
the first index is null), and the index 4 equal to the number 3. 
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^l^eC^o^^ (k)^^! be a little bit confusing 
Some might thinkthey should go the otherway 
(<=) so that it'd be like placing the value into 
the index: 

$anArray [ "anlndex" ] <= "the value I'm 
putting in the index" ; 

However, because of the way that if state- 
ments function, if they had the arrow the more 
logical way, PHP would get confused (the fol- 
lowing code doesn't work): 

if(0 <= 1){ 

$anArray[ "anlndex" ] <= "the value I'm 
putting in the index" ; 

} 



Why => instead of <=? 



PHP will get really confused if you do this. Are 
you trying to do a comparison or place a value 
into an index? Instead of looking at the arrow 
as placing a value into a slot, look at it as plac- 
ing a pointerfrom the slot to the variable. Also, 
note thatin 00 PHP (see Chapter 1 of this mini- 
book), you assign values to an object's proper- 
ties with the pointer arrow (=>). So, at least it is 
consistent. 



Accessing an army index 

To access one of the indices in an array (to get to the egg in a slot), call it by 
name: 

print $anArray[0]; 

This would print whatever was in the 0th index of the array It's as simple as 
that. If you wanted to, you could even use a variable equal to the name of the 
index you wanted to call, as shown here: 

$anArray = array (0=>"first egg", "second egg", "bazaar "=>" third egg"); 
$aVar = 0; 

print $anArray [$aVar] ; 

In this case, first egg would be printed because $aVar is equal to 0, and 
first egg is in the 0th index. Changing $aVar to 1 would cause second 
egg to be printed, and changing $aVar to bazaar would cause third egg 
to be printed. 

So, now take a look at all this in action: 

<hl>Random Computer Quotes</hl> 
<? 



$ theVar = array ( ) ; 
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1— ^ i$theVar 
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$theVar 



$theVar[] = "<p>If at first you don't succeed; call it version 1.0 and ship it 
anyways . . . </p>" ; 

|$theVar[] = "<p>Some things Man was never meant to know. For everything else, 
.ere 1 s Google. </p> " ; 
[] = "<p>sUPERCOMPUTER: what it sounded like before you bought it.</p>"; 
[] = "<p>My software never has bugs. It just develops random 
features . </p>" ; 

$theVar[] = "<p>If you give someone a program, you will frustrate them for a day; 
if you teach them how to program, you will frustrate them for a 
lifetime . </p>" ; 

$theVar[] = "<p>It is easier to change the specification to fit the program than 
vice versa. </p>"; 

$theVar[] = "<p>programmers are tools for converting caffeine into code.</p>"; 
$theVar[] = "<p>Always program as if the person who will be maintaining your 
program is a violent psychopath that knows where you live.</p>"; 

print $theVar[rand(0, 7) ] ; 

?> 

<pxa href="quotes .php">See Another ! </ax/p> 

In this program, you fill an array with eight different quotes and then get and 
print a random array with the print ( ) and rand ( ) functions. 



Debugging With printjr 

A very useful tool when working with arrays is the print_r ( ) function. 
With this function, you can print every index and its value in an array. 

When building the quotes .php program (see the previous section), if you 
accidentally called the rand ( ) function with 1 and 8 instead of 0 and 7, 
you'd get a blank quote every now and then. A quick way to figure out the 
problem if you didn't catch your mistake immediately would have been to 
call print_r ( ) on the array and then capture and print the random value 
you were trying to use to call the array with: 

<hl>Random Computer Quotes</hl> 

<p>" 
<? 

$theArray = array (); 

$theArray[] = "If at first you don't succeed; call it version 1.0 and ship it 
anyways . . . <br / > 11 ; 

$theArray[] = "Some things Man was never meant to know. For everything else, 

there's Google. <br />"; 
$theArray[] = " SUPERCOMPUTER : what it sounded like before you bought it.<br />"; 
$theArray[] = "My software never has bugs. It just develops random features . <br 

/>"; 

$theArray[] = "If you give someone a program, you will frustrate them for a day; 
if you teach them how to program, you will frustrate them for a lifetime. <br 
/>"; 

$theArray[] = "It is easier to change the specification to fit the program than 
vice versa. <br />"; 

$theArray[] = "Programmers are tools for converting caffeine into code.<br />"; 
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print $the. 



$theArray[] = "Always program as if the person who will be maintaining your BookV 
program is a violent psychopath that knows where you live.<br />"; Chapter 5 



rand (1,8); 



eArray [ $ r andNumber ] ; ^ 

o 

print "<br />Trying to get $randNumber in array:"; 

print_r { $theArray) ; ,3 tn 

?> w 

"</p> 

<pxa href = M quotesDebug.php">See Another ! </a></p> 



Introducing Associative Arrays 

You can use string values as keys. For example, you might create an array 
like this: 

$myStuff = array!); 

$myS tu f f [ " name " ] = " andy " ; 

$myStuf f [ " email " ] = " andy@aharrisbooks . net " ; 
Print $myStuf f [ "name" ] ; 

Associative arrays are different than normal (numeric-indexed) arrays in 
some subtle but important ways: 

♦ The order is undefined. Regular arrays are always sorted based on the 
numeric index. You don't know what order an associative array will be 
because the keys aren't numeric. 

♦ You must specify a key. If you're building a numeric-indexed array, PHP 
can always guess what key should be next. This isn't possible with an 
associative array. 

♦ Associative arrays are best for name-value pairs. Associative arrays 
are used when you want to work with data that comes in name/value 
pairs. This comes up a lot in PHP and XHTML. XHTML attributes are 
often in this format, as are CSS rules and form input elements. 

♦ Some of PHP's most important values are associative arrays. The 

$_request variable (described in Chapter 3 of this minibook) is an 
important associative array. So are $_GET, $_post, and several others. 

Make sure to include quotation marks if you're using a string as an array 
index. It will probably work if you don't, but it's bad programming practice 
and may not work in the future. 




560 Expanding to Multidimensional Arrays 



Expanding to Multidimensional Arrays 




"idimensional array is an array that holds arrays. You can put as many 
inside as many arrays as you could possibly want. 



Some uses for these are to group things or to use as lookup tables. See Book 
IV, Chapter 4 for one possible use of lookup tables — using multidimensional 
arrays to hold the distances between cities. 

Another use of a multidimensional array is to store and group items. For 
example, think of a deck of cards. You could use a multidimensional array to 
simultaneously store the cards, which suit they belong to, and even whether 
the cards are in the deck or dealt to a player or players. 

Creating and fitting multidimensional arrays 

Multidimensional arrays are created exactly the same way a normal array is 
created. If you desire, you initialize the parent array: 

$yourArray = array ( ) ; 

The sub-arrays are created on the fly by PHP while you fill them. 

Take a look at this program (also shown in Figure 5-1) that uses multidimen- 
sional arrays to build a deck of cards: 

<p> 
<? 

//set up arrays 
$cardLocation = array(); 

$suits = array ( "heart " , "diamond", "spade", "club"); 
//fill deck 

for ($rank=0; $rank<13; $rank++) { 
//print "<br />"; 
for($suit=0; $suit<4; $suit++) { 

$cardLocation[$rank] [$suit] = "deck"; 

print '<img style="width: 150px; " src=" 1 . $suits [$suit] . ($rank+l) 
. 1 .png" />• ; 

} 

} 

print "</p>"; 

The program uses an array to hold all the cards. The first dimension of the 
array is the card ranks (1-13). Each rank has four possible suits (hearts, dia- 
monds, spades, and clubs). The program uses nested for loops to cycle 
through the array, filling the rank indices with suit arrays. The suit arrays 
have four indices each, which contain the value deck to begin with, indicat- 
ing that these cards are all located in the deck (as opposed to a player's 
hand). 
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Figure 5-1: 

Behold. An 
entire deck 
of cards 
built from a 
mere eight 
lines of 
code! 
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The program also uses a suits array to hold the name values of each suit to 
aid in printing the correct pictures to the user. 



You can look at multidimensional arrays as tables. The card deck array could 
look something like this, if represented in tabular format: 
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2 "deck" 
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2 "deck" 






3 "deck" 







The entire table is the multidimensional array. The far-left column in each 
set represents the indices of the parent array, which in this example is the 
card ranks. Each index in the parent array contains its own sub-array, which 
in this example is the card suits. Each index in the sub-array contains a 
value, which in this example is the location of the card. All the cards are 
located in the deck in this example (you deal five to the player in the next 
section). 
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Accessing a Value in a multidimensional array 

lUsine the table in the previous example as a guide representing the 
fj IfcS^Location array, which holds your deck of cards, if you wanted to 
access the queen of diamonds, you'd do so like this: 



$cardLocation [11] [1] ; 



The first number in this example represents the card you want to access, the 
queen, which is stored in the indice 11. The next number in this example rep- 
resents the rank you want to access, the diamonds, which are stored in the 
indice 1. So, the first number represents the indice in the parent array, and 
the second number is the indice for the child array in that spot in the parent 
array. 

A longer, less convenient representation of this would be: 



$queenSuits = $cardLocation [ 11 ] ; 
$ownerOfCard = $queenSuits [ 1 ] ; 



The value of $ownerOf Card in the latter example and 
$cardLocation [11] [1] in the former example, is deck. 

Now, try dealing five cards to the player (see Figure 5-2 for the output): 



<hl>Card Hand</hl> 

<P> 
<? 

//set up arrays 
$cardLocation = array(); 

$suits = array ( "heart " , "diamond", "spade", "club") 



//fill deck 

for($rank=0; $rank<13; $rank++) { 

for($suit=0; $suit<4; $suit++) { 

$cardLocation[$rank] [$suit] = "deck"; 

} 

} 



print "</pxp>"; 

//deal hand 
for($i=0; $i<5; $i++) { 
$duplicate = true; 



while ( $duplicate) { 

$suit = randd, 4) ; 
$rank = randd, 13) ; 

if ( ScardLocation [$rank] [$suit] == "deck"){ 
$cardLocation[$rank] [$suit] = "player"; 
$duplicate = false; 

print '<img style="width: 150px; " src="' . $suits [$suit] . ($rank 
+ 1) . 1 .png" />' ; 
} 
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Figure 5-2: 

A hand of 
cards dealt 
to the 
player. 
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</p> 

<pxa href = " cardHand . php " >deal< / ax /p> 

Here, you generate two random numbers to pick a card rank and suit. Then, 
you check to see if that card is in the player's hand or in the deck. If the 
card's in the deck, give it to the player by setting the value at that index to 
player instead of deck. You do this until five different indices are set to 

player. 




It's a bit beyond the scope of this chapter, but you can use all this to make a 
PHP poker game. See the CD-ROM for the source code and the start of an 
algorithm for scoring poker hands. 



Using foreach Loops to Simplify Array Management 

foreach loops are great for when you want to step through all elements of 
an array one by one and do something with them. They work like a for loop, 
except they're much simpler: 
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/. Start with the foreach ( ) function. 

2. Plug in the array ($languages, in this case) you want to use, followed 



3. The keyword as, followed by . . . 

If. The variable you want to store the value of the current array indices 
in ($ language, in this case), followed by . . . 

5. The code you want to execute upon each iteration inside brackets (if 
more than one line long). 

Take a look (see Figure 5-3 for the output): 



<hl>Ancestry of PHP</hl> 

<ul> 

<? 

Slanguages = array ( "FORTRAN" , " ALGOL58 " , 
" sh " , " awk " , " PERL " , " PHP " ) ; 



"ALGOL 60 " , "CPL", "BCPL" 



"C" 



foreach ( $languages as $language) { 
print "<li>$language</li>" ; 

} 

?> 

</ul> 

<pxa href = "http : / /www . oreilly . com/news / graphics /prog_lang_poster . pdf " >Ref erence : 
History of Programming Languages Timeline from O'Reilly's website</ax/p> 



Figure 5-3: 

PHP's family 
tree, con- 
densed. 



Edit View History Bookmarks Tools Hefci 
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Ancestrv of PHP 



• FORTRAN 

• FORTRAN I 

• ALG0L58 

• ALGOL60 

• CPL 

• BCPL 



sb 



• awk 

• nawk 

• PERL 

• PHP/FI 

• PHP 

Reference: History of Programming Languages Timeline from O'ReiUy' s website 
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The foreach loop allows you to just step through each array element one 
by one and print it or do anything else you may want with it. 



ach loop can be used just as easily with multidimensional arrays 
(you don't have to type all this; just look on the CD-ROM for the code and 
view Figure 5-4 for the output): 

<hl>Ancestry of PHP Expanded</hl> 

<ul> 

<? 

$languageDetails [ " FORTRAN" ] = array( "1954" , "FORmula TRANslation" , "John W. 
Backus " , " IBM" , "<a href =\ "http : //en. wikipedia. org/wiki/ Fortran \ ">Read 
More</a>" ) ; 

$languageDetails [ "ALGOL58 " ] = array( "1958" , "ALGOrithmic Language", "Friedric L. 
Bauer", "Hermann Bottenburch" , "Heinz Rutishauser 11 , "Klaus Samelson", "John 
Backus", "Charles Katz", "Alan Perlis", "Joseph Henry Wegstein" , "<a 
href =\ "http: / /en .wikipedia . org/wiki/ALGOL_58\ " >Read More</a> " ) ; 

$languageDetails [ "ALGOL60 " ] = array (" 1960 " , "ALGOrithmic Language", "Friedrich L. 
Bauer", "Peter Naur", "Heinz Rutishauser", "Klaus Samelson", "Bernard 
Vauguois", "Adriaan Van Wi jngaarden" , "Michael Woodger", "John W. Backus", 
"Julien Green", "Charles Katz", "John McCarthy", "Alan J. Perlis", "Joseph 
Henry Wegstein", "<a href =\ "http : //en. wikipedia. org/wiki /ALGOL\">Read 
More</a>" ) ; 

$languageDetails [ "CPL" ] = array (" 1963 " , "Combined Programming Language", 

"Christopher Strachey" , "University of Cambridge", "University of London", 
"<a href =\ "http : //en. wikipedia . org/wiki /Combined_Programming_Language\ ">Read 
More</a>" ) ; 

$languageDetails [ "BCPL" ] = array (" 1967 " , "Basic Combined Programming Language", 

"Martin Richards", "University of Cambridge", "<a 

href =\ "http: //en. wikipedia. org/wiki /BCPL\ ">Read More</a> " ) ; 
$languageDetails [ "B" ] = array( "1969" , "Ken Thomspon", "Dennis Ritchie", "Bell 

Labs " , " <a href = \ 11 http : / / en . wikipeadia . org/B_programming_language\ 11 >Read 

More</a>" ) ; 

$languageDetails [ "C" ] = array ( 11 1972 " , "Dennis Ritchie", "Bell Labs", "<a 
href =\ "http: / / en. wikipedia. org/wiki /C_programming_language\ ">Read 
More</a>" ) ; 

$languageDetails [ 11 sh" ] = array (" 1971 " , "tompson SHell", "Ken Thompson", "<a 
href =\ "http: / / en. wikipedia. org/wiki /Thompson_shell\ ">Ream More</a>" ) ; 

$languageDetails [ "awk" ] = array ( 11 1978 " , "Accronym for first letters of author's 
last names", "Alfred Aho", "Peter Weinberger", "Brian Kernighan", "<a 
href =\ "http: / /en. wikipedia. org/wiki /AWK\ ">Read More</a> " ) ; 

$languageDetails [ "PERL" ] = array (" 1987 " , "Doesn't actually stand for anything", 
"Larry Wall", "<a href =\ "http: //en. wikipedia. org/wiki/PERL\ ">Read 
More</a>" ) ; 

$languageDetails [ "PHP" ] = array (" 1995 " , "PHP: Hypertext Preprocessor (originally: 
Personal Home Page tools)", "Rasmus Lendorf", "<a 
href=\ "http: //en. wikipedia. org/wiki/php\ ">Read More</a>") ; 
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foreach { $languageDetails as Slanguage 
print "<li>$language</li>" ; 
print "<ul>" ; 

foreach ($details as $detail){ 
print "<li>$detail</li>" ; 

} 

print "</ul>"; 

} 

?> 

</ul> 



$details) { 
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<pxa href = "http : / /www . oreilly . com/news / graphics /prog_lang_poster . pdf " >Ref erence : 
History 

of Programming Languages Timeline from O'Reilly's website</ax/p> 



sted foreach loops work great for the nested arrays. In the main 
foreach loop, each child array of the parent array is extracted into an array 
variable $details with each iteration of the loop. Then, in the nested 
foreach loop, each value of the extracted child $details array is stored in 
the $detail variable and printed to the user. 



Note that because I wanted to print the name of the language being detailed, 
I used a variant of the foreach loop that extracted and stored not only the 
value, but also the index. Because I'm using an associative array for the 
parent array, each index is a word instead of a number. In this case, the word 
is the programming language name. I store the index in the $ language vari- 
able and the value of the index (which, in this case, is an array) in the 
$ detail variable. 



Figure 5-4: 

An expand- 
ed PHP 
family tree. 
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Associative arrays 



/oTPtlsE a~STTTng instead of an integer for 
your array indices, this is an associative array. 
It behaves the same as a normal array, but it 
gets a special name because it is special (in 
that it uses strings instead of integers as the 
array indices). 

One thing worth mentioning about associative 
arrays is that although using strings without 
quotes around them will work as array indices, 
it is a big code-writing no-no. So don't do this: 



$myArray [blah] = 
store" 

Instead, do this: 

$myArray [ "blah" ] 
store" 



"the stuff you want to 



= "the stuff you want to 



Forgetting to include quotes creates an unde- 
fined constantblah as the indices, ratherthan 



the string blah. This may seem like no big 
deal, but it can lead to subtle errors. The most 
simple scenario to explain is 

$myArray [blah] = "the stuff you want to 
store" ; 

$myArray [ "blah" ] = "stuff you are trying 
to replace the original stuff 
you stored with" ; 

Print $myArray [blah] ; 

You can see that your program would print the 
wrong thing. Your $myArray array would now 
have two separate indices, "blah" and 
blah, which each hold a different value. See 
the manual at http : / /php . net for a more 
detailed discussion on this, if you're interested. 
Best practices state that you use quotes 
around the strings, which I also encourage you 
to do. 



Using foreach With associative arrays 

It's very common to have a large associative array that you want to evaluate. 
For example, PHP includes a very useful array called $_server that gives 
you information about your server configuration (things like your hostname, 
PHP version, and lots of other useful stuff). The following code snippet runs 
through the entire $_server array and prints each key/value pair: 

foreach ($_SERVER as $key => $value) { 

print "<p> \n"; 

print " $key: $value \n" ; 

print "<\p>" ; 
} // end foreach 

Here's how it works: 

/. Begin the foreach loop as normal. 

The associative form of the foreach loop begins just like the regular one: 

foreach ($_SERVER as $key => $value) { 
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2. Identify the associative array. 

The first parameter is the array name: 

foreach ($_SERVER as $key => $value) { 

3. Create a variable for the key. 




Each element of an associative array has a key and a value. I put the key 
in a variable named $key: 

foreach ($_SERVER as $key => $value) { 

If. Use the => symbol to indicate the associative relationship. 

This symbol helps PHP recognize you're talking about an associative 
array lookup: 

foreach ($_SERVER as $key => $value) { 

5. Assign the value of the element to a variable. 

The $value variable holds the current value of the array item: 

foreach ($_SERVER as $key => $value) { 

6. Use the variables inside your loop. 

Each time PHP goes through the loop, it pulls another element from the 
array, puts that element's key in the $key array, and puts the associated 
value in $value. You can then use these variables inside the loop how- 
ever you wish: 

print " $key: $value \n"; 

The $_server variable is extremely useful for checking your environment, 
but you shouldn't make this program available on a publicly-accessible 
server. Doing so gives the bad guys information they could use to cause you 
headaches. Use it for testing and debugging, then remove it. 



Breaking a String into an Array 

Many times, it can be useful to break a string into an array programmatically, 
especially when reading input from a file. 



Here are the two different ways of doing this: 



♦ explode: explode takes one parameter as a delimiter and splits the 
string into an array based upon that one parameter. 

♦ split: If you require regular expressions, split's the way to go. split 
allows you to take complicated chunks of text, look for multiple different 
delimiters, and break it into an array based on the delimiters you specify. 

explode works well with comma-separated value (CSV) files and the like, 
where all the parameters you wish to break the text on are the same, split 
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works better for when there are many different parameters that you wish to 
break the text on or when the parameter you're looking for is complex. 



nq arrays With explode 

Array creation with explode is very straightforward: 

explode ( " ", $theString) ; 

The first value is the parameter on which you're splitting up the string. The 
second value is the string you would like to split into an array. In this exam- 
ple, the string would be split up on each space. You can put anything you 
want as the split parameter. 

So, if you have the string that you want to store each word as a value in, 
enter the following code (see Figure 5-5 for the output): 
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<? 

$theString = "PARC (Palo Alto Research Center) was one of the single most 
important hubs of invention for modern computing" ; 

$theArray = explode ( " ", $theString) ; 

print_r ( $theArray) ; 



File Edit View History Bookmarks Tods Help 

^ * * L^F © (t ! S http://bc=Jhost/. : fdMd5.5/explode.pro H ►] UGH*"* 

Array ( [0] => PARC [1] => was [2] => one [3] => of [4] => the [5] => single [6] => most [7] => important [8] => bubs [9] => of [10] => invention [ 1 1 ] => for 
[12] => modern [13] => computing) 



Figure 5-5: 

The string 
exploded 
into an 
array. 



Now: Mostly Cloudy, 37° F 
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More on split and regex 



uTSTrTorB wmfortable with PERL-style reg- 
ular expressions, use preg_split ( ) instead 
of split ( ) . 

If you're looking for a character that can be in 
either lower- or uppercase, you can use 
split ( ) , which is case-insensitive. 

split can get really complicated, especially 
after you really start using regular expressions. 
I've only touched on the surface here. Other 



functions, such as eregO and ereg_ 
replace ( ) , use regular expressions to make 
sure that strings have certain elements in them 
(to do things like make sure a user entered a 
valid e-mail address) and even to replace cer- 
tain elements in a string. Also, you can see 
http: //us2 .php.net/manual/en/ 
ref . regex .php for more on split and 
other regular expression functions. 



The delimiter can be anything you want. If you're dealing with a comma-sep- 
arated value (CSV) file, where each value is separated by a comma, your 
explode method might look like this: 

$theArray = explode!",", $theString) ; 

Creating arrays With split 

split is a bit more complicated, split uses regular expressions to split a 
string into an array, which can make it a bit slower than explode, in some 
instances. 

split looks exactly like explode, but instead of one character inside quo- 
tations, you can cram all the characters you want to split on into brackets 
inside the quotations. 

An instance where you'd want to use split instead of explode could be 
when processing an e-mail address. A basic e-mail address has dots (.) and 
an at sign (@). So, to split on both of these, you could do the following (see 
Figure 5-6 for the output): 

<? 

$theString = "joe@somebody.net"; 

$theArray = split ( " [@. ] " , $theString) ; 

print_r ( $theArray ) ; 
?> 
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Figure 5-6: 

The e-mail 
address 
exploded 
into an 
array. 



File Edit View History Bookmarks Tools Help 
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split works well for timestamps, e-mail addresses, and other things 
where there's more than just one unique delimiter that you wish to split the 
string on. 
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In This Chapter 

V Creating functions to manage your code's complexity 
\^ Enhancing your code by using functions 

Working with variable scope 

V Getting familiar with session variables 

V Incorporating session variables into your code 



mjw? programs are used to solve interesting problems, which can get 
V quite complex. In this chapter, you explore ways to manage this com- 
plexity. You discover how to build functions to encapsulate your code. You 
also learn how to use session variables to make your programs keep track of 
their values, even when the program is called many times. 

Creating \lour Ou/n Functions 

It won't take long before your code starts to get complex. Functions are 
used to manage this complexity. As an example, take a look at Figure 6-1. 

Rotting dice the old-fashioned Way 

Before I show you how to improve your code with functions, look at a program 
that doesn't use functions, so you have something to compare with. 

The rollDice .php program creates five random numbers and displays a 
graphic for each die. Here's the code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http: / /www. w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 
<title>rollDicel .php</title> 
</head> 

<body> 

<hl>RollDice l</hl> 

<h2>Uses Sequential Programming</h2> 
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Figure 6-1: 

This pro- 
gram rolls 
five dice. 
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<?php 

$roll = rand (1,6) ; 
$image = "die$roll . jpg" ; 
print <<< HERE 

<img src = "$image" 

alt = "roll: $roll" /> 

HERE; 

$roll = rand (1, 6) ; 
$image = "die$roll . jpg" ; 
print <« HERE 

<img src = "$image" 

alt = "roll: $roll" /> 

HERE ; 

$roll = rand (1, 6) ; 
$image = "die$roll . jpg" ; 
print <<< HERE 

<img src = "$image" 

alt = "roll: $roll" /> 

HERE ; 

$roll = rand (1, 6) ; 
$image = "die$roll . jpg" ; 
print <<< HERE 
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| $roll = rand(l,6) ; 

$image = "die$roll . jpg" ; 
print <<< HERE 

<img src = "$ image" 

alt = "roll: $roll" /> 

HERE ; 

?> 
</body> 
</html> 

There are some interesting features of this code: 

♦ The built-in rand ( ) function rolls a random number. Whenever possi- 
ble, try to find functions that can help you. The rand ( ) function pro- 
duces a random integer. If you use two parameters, the resulting number 
will be in the given range. To roll a standard six-sided die, use 

rand (1,6): 

$roll = rand (1, 6) ; 

♦ I have created an image for each possible roll. To make this program 
more visually appealing, I created an image for each possible die roll. 
The images are called diel .jpg, die2 . jpg, and so on. All these images 
are stored in the same directory as the PHP program. 

♦ The img tag is created based on the die roll. Once I have a die roll, it's 
easy to create an image based on that roll: 

$image = "die$roll . jpg" ; 
print «< HERE 

<img src = "$image" 

alt = "roll: $roll" /> 

HERE ; 

♦ The die-rolling code is repeated five times. If you can roll one die, you 
can easily roll five. It's as easy as copying and pasting the code. This 
seems pretty easy, but it leads to problems. What if I want to change the 
way I roll the dice? If so, I'll have to change the code five times. What if I 
want to roll 100 dice? The program will quickly become unwieldy. In gen- 
eral, if you find yourself copying and pasting code, you can improve the 
code by adding a function. 

Improving code With functions 

Functions are pre-defined code fragments. Once you define a function, you can 
use it as many times as you wish. The outward appearance of this program is 
identical to rollDicel . php, but the internal organization is quite different: 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
Khtml lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 



L <IJgta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 



<title>rollDice2 .php</title> 
</head> 

<body> 

<hl>RollDice 2</hl> 
<h2>Uses Functions</h2> 
<?php 



function rollDie ( ) { 
Sroll = rand (1, 6) ; 
$image = "die$roll . jpg" ; 
print <<< HERE 

<img src = "$ image" 



HERE ; 

} // end rollDie 

for ($i = 0; $i < 5; $i++) { 

rollDie () ; 
} // end for loop 



</body> 
</html> 

Here's how things have changed in this version: 

/. Use the function keyword to define a function. 

The function keyword indicates that a function definition will follow. The 
code inside the definition won't be run immediately, but instead, PHP will 
"remember" the code inside the function definition and play it back on 
demand: 

function rollDie(){ 

2. Give the function a name. 

The function name should indicate what the function does. I call my 
function rollDie ( ) because that's what it does (rolls a die): 

function rollDie{){ 

3. Specify arguments with parentheses. 

You can send arguments (special variables for your function to work 
with) by indicating them in the parentheses. This function does not need 
arguments, so I leave the parentheses empty: 




alt = "roll: $roll" /> 



?> 



function rollDie(){ 
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For more information on functions, arguments, and the return state- 
ment, turn to Book IV, Chapter 4. Functions in PHP act almost exactly 
heir cousins in JavaScript. 



fn the function definition with a left brace ({). 

The left brace is used to indicate the beginning of the function code. 

5. Indent the code that makes up your function. 

Use indentation to indicate which code is part of your function. In this 
case, the function generates the random number and prints an image tag 
based on that random number: 

function rollDie(){ 
$roll = rand (1,6) ; 
$image = "die$roll. jpg" ; 
print «< HERE 

<img src = "$image" 

alt = "roll: $roll" /> 

HERE; 

} // end rollDie 

6. Denote the end of the function with a right brace (}). 

7. Call the function by referring to it. 

Once the function is defined, you can use it in your code as if it were 
built into PHP. In this example, I call the function inside a loop: 

for ($i = 0; $i < 5; $i++) { 

rollDieO ; 
} // end for loop 



Naming functions and variables 



It can be hard to come up with a good naming 
scheme for your variables and functions. Doing 
so is very important because when you come 
back to your program, if you haven't named 
yourfunctions and variables consistently, you'll 
have a hard time understanding what you 
wrote. Here are two common naming schemes 
to make this simple: underscores "_" between 
words or camel-casing. 

Using underscores is as straightforward as 
s epar a t ing_each_word_wi th_an_un 
derscore. It's readable, but it's ugly and can 
cause the variable names to get awfully 
lengthy. 



The method I prefer and use throughout this 
book is camel-casing — each new word after 
the first word gets capitalized 
justLikeThis. It takes up less space than 
the underscore method and makes reading the 
code quicker, and after you get used to it, you 
won't even notice it anymore. 

Tons of naming schemes are out there, and 
even if you don't use either of these, picking one 
and being consistent is important. Searching for 
naming variables in Google returns over a mil- 
lion hits, so plenty of resources are out there if 
you want to find more. 
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many times as I want. Functions also make your code easier to read because 
tails of rolling the dice are hidden in the function. 
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Two kinds of scope are in PHP: global and local. 

If you define a variable outside a function, it has the potential to be used 
inside any function. If you define a variable inside a function, you can access 
it only from inside the function in which it was created. See Book IV, Chapter 
4 for more on variable scope. 

So, if you have a variable that you want to access and modify from within the 
function, you either need to pass it through the parentheses or access it 
with the global modifier. 



The following code will print "hello world!" only once: 



<?php 

$output = "<p>hello world! </p>"; 

function helloWorld ( ) { 
global $output; 

print $output; 

} 

function helloWorld2 ( ) { 
print $output; 

} 



helloWorld ( ) ; 
helloWorld2 ( ) ; 
?> 



I left the global keyword off in the helloWorld2 ( ) function, so it didn't 
print at all because inside the function, the local variable $ output is unde- 
fined. By putting the global keyword on in the helloWorld ( ) function, I let 
it know I was referring to a global variable defined outside the function. 

PHP defaults to local inside variables because it doesn't want you to acci- 
dentally access or overwrite other variables throughout the program. For 
more information about global and local scoping, check out http : / / 
us3 .php.net/global. 

Returning data from functions 

At the end of the function, you can tell the function to return one (and only 
one) thing. The return statement should be the last statement of your function. 
The return statement isn't required, but it can be handy. 
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The getName ( ) function in the following code example will return world to 
be_used by the program. The program will print it once and store the text in 
,e to be printed multiple times later, as shown in the following code 
re 6-2: 




Figure 6-2: 

An example 
of a function 
with a return 
statement. 



<?php 

function getName ( ) { 
return "world" ; 

} 

print "<hl>Hello" . getName ( ) . "</hl>"; 
$name = getName ( ) ; 



print «<HERE 

<p>$name, welcome to our site. We are so very happy to have you here.</p> 
<p>If you would like to contact us $name, just use the form on the contact 

page.</p> 
HERE; 

?> 

For more on return statements see http : / /de3 . php . net /return. 



F_Se Edit View History gookmarks Tools Help 
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world, welcome to our site. We are so very happy to have you here. 

If you could like to contact us world, just use the form on the contact page 
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Managing Persistence u/ith Session Variables 

rer^"-side programming is very handy, but it has one major flaw. Every con- 
IriVjWn to the server is an entirely different transaction. Sometimes, you'll 
want to reuse a variable between several calls of the program. As an exam- 
ple, take a look at rollDice3 .php in Figure 6-3. 

The interesting feature of rollDice3 .php happens when you reload the 
page. Take a look at Figure 6-4. This is still rollDice3 .php, after I refreshed 
the browser a few times. Take a look at the total. It increases with each roll. 

The rollDice3 .php program is interesting because it defies normal server- 
side programming behavior. In a normal PHP program, every time you 
refresh the browser, the program starts over from scratch. Every variable 
starts out new. 

Understanding session Variables 

The rollDice3 .php program acts differently. It has a mechanism for keep- 
ing track of the total rolls and number of visits to the page. 

When a visitor accesses your Web site, she's automatically assigned a 
unique session id. The session id is either stored in a cookie or in the URL. 
Sessions allow you to keep track of things for that specific user during her 
time on your site and during future visits if she's not cleared her cache or 
deleted her cookies. 

Any mundane hacker can sniff out your session ids if you allow them to be 
stored in the URL. To keep this from happening, use the session. use_ 
only_cookies directive in your PHP configuration file. This may be incon- 
venient to users who don't want you to have a cookie stored on their machine, 
but it's necessary if you're storing anything sensitive in their session. 

Sessions are great because they are like a big box that the user carries around 
with him that you can just throw stuff into. Even if the user comes back to the 
site multiple times, the variables stored in the session retain their values. If 
you have hundreds of users accessing your site at the same time, each one 
will still have access to only their own versions of the variable. 
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Here's the code for rollDice3 .php: 

S»^_on_start ( ) ; 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv= " content-type" content="text/xml; charset=utf -8 " /> 
<title>rollDice3 .php</title> 
</head> 

<body> 

<hl>RollDice 3</hl> 

<h2>Uses a Session Variable</h2> 

<?php 

function rollDie ( ) { 
global $total; 

$roll = rand (1, 6) ; 
$image = "die$roll . jpg" ; 
print <<< HERE 

<img src = 11 $ image" 

alt = "roll: $roll" /> 

HERE; 

$total = $_SESSION [" total "] ; 
$total += $roll; 
$_SESSIONt" total"] = $total; 

} // end rollDie 

$count = $_SESSION[" count"] ; 
$count++; 

$_SESSION[ "count" ] = $count; 
rollDie () ; 

print " <p>Rolls: $count</p> \n" ; 
print " <p>Total : $total</p> \n" ; 

?> 
</body> 
</html> 



This program rolls a die, but it uses session variables to keep track of the 
number of rolls and total value rolled. The session variable is updated every 
time the same user (using the same browser) visits the site. 
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Adding session Variables to your code J»°^ 

Hare's how to incorporate sessions into your programs: 



your code with a call to session_start ( ) . 



If you want to use session variables, your code must begin with a ses- 
sion_start ( ) call, even before the DOCTYPE definition. I put a tiny 
<?php ?> block at the beginning of the program to enable sessions: 



<?php 

session_start ( ) ; 

?> 



00 CA 

re — ■ 

CA = 
(A IB 

o' Z 1 



— . a 
0) s 



re si 
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2. Load session variables from the $_session superglobal. 

$_SESSI0N is a superglobal array (much like $_request). Create a 
local variable and extract the current value from the $_SESSI0N asso- 
ciative array: 

Stotal = $_SESSI0N [" total" ] ; 

If there is no total element in the $_SESSI0N array, a null value is 
assigned to the variable, instead (which evaluates to 0 in a numeric 
context). 



Sessions and security 



The session mechanism is powerful and easyto 
use. It isn't quite foolproof, though. Sessions are 
automatically handled through a browser mech- 
anism called cookies. Cookies aren't inherently 
good or evil, but they've gotten a bad reputation 
because some programs use them maliciously. 
You'll occasionally run across a user who's 
turned cookies off, but this is not a major prob- 
lem, as PHP can automatically use other options 
when cookies are not available. There's rarely a 
need to work with cookies directly in PHP, as 
sessions are a higher-level abstraction of the 
cookie concept. 

Like all data passed through the HTTP protocol, 
session and cookie information is passed entirely 



in the clear. A person with evil intent can capture 
your session information and use it to do bad 
things. 

Generally, you should stay away from sensitive 
information (credit card data. Social Security 
numbers, and so on) unless you're extremely 
comfortable with security measures. If you 
must pass potentially sensitive data in your PHP 
program, investigate a technology called TLS 
(Transport Layer Security), which automatically 
encrypts all data transferred through your site. 
TLS replaces the older SSL technology and is 
available as a free plugin to Apache servers. 
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3. Store session variables in the $_session superglobal. 
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You can manipulate the local variable, but if you want to use the value 
e next time the program runs for this user, you need to store the value 
ack into the session after you change it. 

For example, the following code loads the variable $count from the ses- 
sion, adds one to it, and stores it back into the session: 

$count = $_SESSION[ "count" ] ; 
$count++; 

$_SESSION[" count"] = $count; 

If you want to reset your sessions for testing purposes, you can write a quick 
program to set the variables to 0, or you can use the Web Developer toolbar: 
Cookies O Clear Session Cookies. Note that the session data itself isn't stored 
in the cookie. The cookie just contains a reference number so the server can 
look up the session data in a file stored on the server. 



Chapter 7: Working With Files 
D rop BOQttS Directories 



In This Chapter 

V Saving to text files 

Reading from text files 
v* Reading a file as an array 
v 0 Parsing delimited text data 
]^ Working with file and directory functions 



J\ n important part of any programming language is file manipulations. 
W w Whether you need to create a comma-separated value (CSV) file or 
generate a dynamic list of files in a directory, or just need a semi-permanent 
place to log records on the server, file manipulation functions are an indis- 
pensable part of your PHP toolbox. 



Text File Manipulation 

Work with text files is split into two basic categories: writing and reading. 
Writing and reading come down to six basic functions. See the following 
bullet list for a brief explanation of the six basic file functions. Each of these 
six functions has an entire sub-section in the following "Writing text to files" 
and "Reading from text files" sections: 

♦ f open ( ) : Stores a connection to a file you specify in a variable you 
specify 

♦ f write ( ) : Writes text you specify to a file you specify 

♦ f close ( ) : Closes the connection to a file you specify that you created 
with f open ( ) 

♦ f gets ( ) : Reads a line from a file you specify 

♦ f eof ( ) : Checks to see if you have hit the end of a file you specify 
during a file read 

4- file ( ) : Puts the entire contents of a file you specify into an array 
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Writing text to files 

section details the functions needed to access and write to a file, such 
to request access to a file from PHP with the f open ( ) function, write 
file using the fwrite ( ) function, and let PHP know you are done with 
the file with the f close ( ) function. 



(open () 

In order to do any file manipulations, you must tell PHP about the file you would 
like to manipulate and tell PHP how you would like to manipulate that file. 

The f open ( ) function has two required parameters that you must pass to it; 
the path to the file and the type of file manipulation you would like to per- 
form (called the mode). 

The f open ( ) function returns a connection to the requested file if it is suc- 
cessful (the connection is called a pointer — see the "Official file manipulation 
terminology" sidebar for more information). If there is an error, the f open ( ) 
function returns False. Whatever the f open ( ) function returns (the connec- 
tion or False), it should be assigned to a variable (called a stream). 

Here is an example of the f open ( ) function (see the "Creating a CSV file" sec- 
tion, later in this chapter, for an example of the f open ( ) function in action): 

$f ileConnection = f open ( $theFile, $theMode) ; 

In the preceding example, the file connection returned by the f open ( ) func- 
tion is assigned to the variable $f ileConnection. The variable $theFile 
would contain the path to a file (for example, both c : \\xampp\\htdocs\\ 
inc\ \inf o . txt and /inc/log . txt are valid file paths). The file must be 
in a place the server can access, meaning that you can put the file anywhere 
you could put a PHP page for the server to serve. For example, you couldn't 
normally try to serve the file from your My Documents folder. It has to be a 
folder under the htdocs directory on your server. The variable $theMode 
would contain one of the values from the following list: 

♦ r: Grants read-only access to the file. 

♦ w: Grants write access to the file. Be careful, though, if you specify this 
mode for the f open ( ) function and use the fwrite ( ) function, it will 
completely overwrite anything that may have been in the file. Don't use 
w if there's anything in the file you want to keep. 

♦ a: Grants the right to append text to the file. When you specify this 
mode for the f open ( ) function and use the fwrite ( ) function, the 
fwrite ( ) function appends whatever text you specify to the end of the 
existing file. 
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♦ r+ or w+: Grants read and write access to the file. I don't talk about r+ BookV 

and w+ in this book, except to say that they're a special way of accessing Chapter 7 
ile. This special file access mode is called random access. This 

s you to simultaneously read and write to the file. If you require a § 

this type of access, you probably should be using something more g. s- 
simple and powerful, like relational databases. 

fu/riteC) 

After you have opened a file with the f open ( ) function and assigned the file 
connection to a variable (see the "fopenO" section, earlier in this chapter, 
for more information), you can use the file in your PHP code. You can either 
read from the file, or you can write to the file with the fwrite ( ) function. 

Depending on what mode you specified when you opened the file with the 
f open ( ) function, the fwrite ( ) function will either overwrite the entire 
contents of the file (if you used the w mode), or it will append the text you 
specify to the end of the file (if you used the a mode). 



Official file manipulation terminology 



If you look at the documentation for f open ( ) , 
or any of the file manipulation functions, you 
will see some funny terminology. I decided, to 
keep things simple, I would use more recogniz- 
able, easily understandable terms. I wanted 
you to know that I switched things up a little bit 
and give you a quick primer to help you out if 
you did happen to look atthe official documen- 
tation or talk to a more seasoned programmer 
who might use the official terms. 

According to the official online PHP documenta- 
tion, the f open ( ) function returns a file pointer, 
and binds a named resource to a stream. 

What this means is that when you use the 
f open ( ) function, it opens a file (much like 
you would do if you opened the file in Notepad) 
and returns a pointer to that file. 

The pointer is like if you put your mouse arrow 
atthe beginning of the file and clicked there to 
create the little blinky-line cursor telling 



Notepad where you are focusing (where you 
would like to begin editing the text). The pointer 
is PHP's focus on the file. 

With the fopen( ) function, PHP's focus is 
bound to a stream, which means that it is 
attached to a variable. When you use the 
f open ( ) function, you associate the file with 
a variable of your choosing. This variable is 
how PHP keeps track of the location of the file 
and keeps track of where PHP's cursor is in the 
file. Normally, when you think of a stream, you 
might think of a one-way flow. But, in this case, 
the stream can either be read into the program 
character by character, line by line, or you can 
move the cursor around to any point in the file 
that you want. So, ratherthan being just a one- 
way flow, the stream is really an open connec- 
tion to a file. 

See http://us.php.net/manual/ 
en/ function, f open . php for more detail 
on the f open ( ) function. 
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The fwrite ( ) function has two required parameters you must pass to it; 
the connection to the file that was established by the f open ( ) function and 
jtbe^xt you wish to write to the file. The fwrite ( ) function returns the 
f\^^i" of bytes written to the file on success and False on failure. 

Here is an example of the fwrite ( ) function (see the "Creating a CSV file" 
section, further in this chapter, for an example of the fwrite ( ) function in 
action): 

$writeResults = fwrite ($fileConnection, $text) ; 

The fwrite ( ) function can also be written fputs ( ) . fwrite ( ) and 
fputs ( ) both do the exact same thing, fputs ( ) is just a different way of 
writing fwrite ( ) (fputs ( ) is referred to as an alias of fwrite ( ) ). 

fctose () 

After you are finished working with the file, it's important to close the file 
connection. 

To close the connection to a file you have been working with, you must pass 
the connection to the file you wish to close to the f close ( ) function. The 
f close ( ) function will return True if it is successful in closing the connec- 
tion to the file and False if it is not successful in closing the connection to the 
file. 

Here is an example of the f close ( ) function: 

f close ( $f ileConnection) ; 

Creating a CSV fite 

The most common reason to write to text files from PHP is to create comma- 
separated value (CSV) files. CSV files are usually opened in a spreadsheet 
program, such as Microsoft Excel. This section is an example of how to use 
the functions from previous sections in this chapter (f open ( ) , fwrite ( ) , 
and fclose())to create a CSV file from a database table. (See Chapter 8 in 
this minibook for more on working with databases in PHP.) 

You can think of a CSV file as a big table. Each column is separated by 
commas, and each row is separated by newline characters (\n). So, the fol- 
lowing text 
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rowl iteml, rowl item2\n 
row2 iteml, row2 item2 
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would generate the following cells if opened in a spreadsheet program (such 
as Excel): 



rowl item2 
row2 item2 




When reading items back into PHP from a CSV file, you use the commas and 
newlines to parse the data so that it can be used by the program. (See the 
"Reading from a CSV file" section, later in this chapter.) 

Don't forget to end each line with a newline (\n) character. 
str_rep(ace () 

While commas are the most common delimiter, you can use tabs (\t), pipes 
( | ), tildes (~), or anything else you want to separate the text. Whatever you 
decide to use as the delimiter, make sure errant occurrences of the delimit- 
ing character don't appear in the text and throw off the scheme. To protect 
against this, you can run the str_replace ( ) function on the text before 
adding the delimiters and inserting it into the file; this replaces unwanted 
occurrences of the delimiting character with an empty string. 

The str_replace ( ) function takes three parameters; the string to be replaced, 
the string to replace it with, and the string the replacing is to be done in: 
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$text = str_replace ( " , 



$text) ; 



Escaping with HTML entities 



If you're planning on displaying the user's input 
to the screen, escape all the special characters 
before saving the user's input to a file or send- 
ing it to the browser. Otherwise, some mali- 
cious user could use some simple CSS and 
HTML to replace your entire Web page with 
one of his choosing. Remember, paranoia is 
your friend. The simplest way to guard against 
this is to usethehtmlentities ( ) function: 

$userlnput = 

html entities ($userlnput) ; 



This function converts any HTML characters 
the user may have entered into the character's 
HTML entities equivalent. That is, if the user 
entered <div>, it'd be converted to 
&lt ; div&gt. When you display it backto the 
page, instead of creating a new HTML div, the 
browser will simply output the literal string 
<div>to the user. 

If, for some reason, you want to decode these 
entities, use the html_entity_decode ( ) 
function. This works exactly like its html 
entities ( ) counterpart, just in reverse. 



Text File Manipulation 



Because you may not want all of the commas removed from your text, you might 
consider using something that is not likely to occur in your text as the delimiter, 
IspcJjgs a pipe ( | ) or tilde (~), or even just a custom multi-character delimiter like 
l^p^^limiter | . The problem with the multi-character delimiter method is 
that if you plan on using the text file in a spreadsheet program (such as Excel), 
the spreadsheet program may not support multi-character delimiters. The multi- 
character delimiter method is best for storing text that you only plan on reading 
back into PHP and not for text you plan on using in a spreadsheet program. 

The CSV file creation example 

This CSV file creation example performs the following tasks: 

/. Opens a connection to a file 

2. Connects to a database 

3. Gets the desired information out of a database table 
6. Writes information from the table to the file 

5. Builds an HTML table showing what was written to the file 

6. Closes the connection to the file 



See Chapter 8 of this minibook for more on database connection and manip- 
ulation. The CD-ROM contains the full code for this example, as well as the 
SQL to generate the table used in this example. Figure 7-1 shows the HTML 
and CSV file generated by this example. 

Here is the PHP code for the CSV file creation example: 

<body> 

<? 

//This is the CSV file we want to create 
StheFile = "employees . csv" ; 

//We want to completely over-write the file, so use "w" . 
StheMode = "w" ; 

//prepare the string to be filled with employees and printed to the file. 
$employees = " " ; 



/* 

* If we successfully connect to the file, do all of the file operations. 

* Otherwise, print an error. 
*/ 

if ($f ileConnection = fopen($theFile, $theMode) ) { 
//connect to the database 

$conn = mysql_connect { "localhost" , "xfd", "xfdl23") or die (mysql_error ( ) ) 
mysql_select_db ( " f ile_manipulation" , $conn) or die (mysql_error ( ) ) ; 



//get the employees out of the employee table 
$sql = "SELECT * FROM employees"; 
$result = mysql_query($sql, $conn) ; 



/* 
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print 



* for each employees row, print a new table row, BookV 

* and add the employee to the text string to be printed to the file. Chapter 7 



table>" ; 

ow = mysql_fetch_array ($result, MYSQL_ASSOC) ) { m <■ 

"<tr>\n" ; 



$employees . = $val 

} 

print "</tr>\n\n" ; 



2 o 



foreach{$row as $col=>$val){ — -tn 

print "\t<td>$val</td>\n"; £ ^. 

o =r 

//escape commas in string jj" 31 

$val = str_replace ( " , " , "\,", $val) ; w cd" 



//go to the next line in the CSV file to prepare for the next record. 
$employees .= "\n"; 

} 

print "</table>" ; 

//print the employees to the file 

if ( fwrite ( $f ileConnection, $employees) ) { 

print "<p>$employees successfully written to the file.</p>"; 
}else{ 

print "<p>There was an error while attempting to write $employees to the 
f ile. </p>" ; 

} 

//close the file 

if ( fclose ( $f ileConnection) ) { 

print "<p>Closed the file connection successfully. </p>" ; 
}else{ 

print "<p>Unable to close the file connection. </p>" ; 

} 

}else{ 

print "<p>Unable to connect to the file.</p>"; 



?> 

</body> 




In the CSV file creation example, the text file was written to only once, at the 
very end of the program. If the a mode had been used, instead of the w 
mode, each record could have been written to the file as it was read from the 
database, but that would have put much more strain on the server and made 
the program slower. File reads and writes are very expensive in terms of pro- 
cessing time and memory for the server, in comparison to simple string con- 
catenation in a PHP program. 
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Figure 7-1: 

The HTML 
file contains 
the raw text 
to be written 
to the file; 
the CSV file 
(opened in 
Excel) 

renders as a 
spreadsheet. 
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Bill,Gates,Co-Founder,1975-04-04,966667,52, Phil.Haack, Senior Program Manager.2008-01-05, 165231, 36, Charles^Henders Jamtor.2001-03-23,48352,43, 
successfully written to the Sle. 

Closed the file connection successfully. 
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Reading from text files 

This section details the functions needed to read from a text file. Requesting 
access to a file from PHP with the f open ( ) function (See the "fopenO" sec- 
tion, earlier in this chapter) grants you access to the file. When you have 
access to the file, you can read from the file one line at a time with the 
f gets ( ) function. With a combination of the f gets ( ) function and the 
f eof ( ) function, you can iterate through the entire file, reading the file into 
a PHP program one line at a time. With the file ( ) function, you can read 
the entire file into an array in a PHP program. 




fgetsO 

After you have opened a file with the f open ( ) function and assigned the file 
connection to a variable, you can use the file in your PHP code. You can 
either write to the file, or you can read from the file. One method of reading 
from the file is to use the f gets ( ) function. The f gets ( ) function reads 
one line from the file. You can combine the f gets ( ) function with the 
f eof ( ) function to read each line of the file, starting with the first line. (See 
the "feofO" section and the "fileO" section, both later in this chapter). 

In order to be able to read from the file, you must have specified either the r, 
r+, or w+ mode when using the f open ( ) function. 
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To use the f gets ( ) function, you must pass it a variable containing the connec- 
tion to the file that you established with the f open ( ) function. The f gets ( ) 
eturns the string read from the file on success and False on failure. 



Here is an example of the f gets ( ) function (See the "Reading from a CSV file" 
section, later in this chapter, for an example of the f gets ( ) function in action): 

$line = fgets ( $f ileConnection) ; 
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^pA. Sty^ If you know exactly how much of each line you want to read from a file, you 



can pass the fgets ( ) function an optional length parameter after the file 
connection. See the online PHP documentation for more information (http : / / 
us .php.net/fgets). 




feofO 

The f eof ( ) function tests to see if you have hit the end of a file when you 
are reading from a file. When you combine the f eof ( ) function with the 
fgets ( ) function, you can read the contents of a file into your PHP program 
one line at a time. 



To use the f eof ( ) function, you must pass it a variable containing a connection 
to the file that you established with the f open ( ) function. (See the "fopenO" 
section, earlier in this chapter, for more information.) The f eof ( ) function 
will return True if the end of the file has been reached (or if an error 
occurs), otherwise it returns False. 

Here is an example of the f eof ( ) function. This example will print a speci- 
fied file, line by line, to the screen: 



while ( ! feof {$f ileConnection) ) { 
print fgets ($f ileConnection) ; 

} 



The actual feof ( ) function itself is feof ( $f ileConnection) . 



fiteC) 

The f ile ( ) function allows you to read the entire file at once and load it 
into an array. Using the f ile ( ) function is convenient because, whereas the 
fgets ( ) function requires you to open the file, read it line by line, and then 
close the file, when you use the file ( ) function, it loads the file into an 
array, which you can do whatever you want with. You do not have to use the 
f open ( ) function or the f close ( ) function with the file ( ) function. The 
f ile ( ) function performs the file open and close on it's own. 
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$i\NG/ The only problem with the f ile ( ) function is that when a file is particularly 
Jarge, loading the entire file into memory can be bad for your server. The 
pgser the file, the more memory it takes up. Therefore, it isn't recommended 
iij^e the f ile ( ) function for very large files. Instead, for large files, it is 
better to read them in one line at a time with the f gets ( ) function. 

The f ile ( ) function has only one parameter you must pass to it — the path 
to the file you wish to read. This path can be relative to the PHP file calling 
it, or it can be a URL. If successful, the file ( ) function will return an array 
containing the contents of the file. Each line of the file will include the new- 
line character (\n) and will be a separate element in the array. (See Book IV, 
Chapter 4 for more on arrays.) If it fails, the filet) function will return False. 

Here is an example of the f ile ( ) function. This function stores the entire 
contents of a file named log. dat in an array called $logData: 



$logData = fileClog.dat"); 



Reading from a CSV file 

The most common reason to read from text files with PHP is to extract data 
from comma-separated value (CSV) files. CSV files are usually created with a 
spreadsheet program, such as Microsoft Excel. This section is an example of 
how to use the functions explained in previous sections in this chapter 
(f open ( ) , f gets ( ) , f eof ( ) , and f close ( ) ) to read from a CSV file and 
insert the data from the file into a database table. (See Chapter 8 in this mini- 
book for more on working with databases in PHP.) 

Bringing text back in and parsing it is a little bit trickier than saving it to the 
file (refer to the "Creating a CSV file" section, earlier in this chapter). For 
parsing data, you have to expand the code to include the actual parsing. 



split () 

When you retrieve the text with the f gets ( ) function, it's all just one big 
line. In order to use the text, you need to split it up by whatever you used as 
the delimiter. 

The split ( ) function takes two parameters, the delimiter you wish to split 
the text on and the text you wish to split. The split ( ) function returns an 
array of the split-up text if it is successful and False if it fails. 

Here is an example of the split ( ) function. This function stores the con- 
tents of the $line variable split into an array on the pipe ( | ) delimiter in the 
$lineArray variable: 

$lineArray = split (" | " , $line) ; 
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stripslashesO 



yowre rwen/irfg'Ttie text to be split from a form 
submitted by the user, you may end up with some 
funny results from the split ( ) function, espe- 
cially if you used tabs to delimit your data. 
Sometimes, PHP will add slashes before single 
quotes ( ' ), double quotes ( " ), and backslashes 
(\). This is because the PHP directive 
magic_quotes_gpc is on by default (in your 
php.ini file). This causes PHP to run 
addslashes ( ) on all text sentthrough post. 



get, or cookies, which means that ' , ", and \ 
will turn into \ ', \ ", and \\ when they're sub- 
mitted through a form. To reverse this for when 
you're printing to the page (so that you don't have 
funny output), run the stripslashes ( ) 
function on the line before you split it: 

$line = stripslashes ( $line) ; 

Now, you have an array containing the split ele- 
ments of the line to do whateveryou want with. 



tistO 

The list ( ) function will take an array and distribute its contents to vari- 
ables you specify. This makes it perfect for using with the split ( ) function 
and anything where you want to print the contents of an array out to the 
screen or insert them into a database. 

The list ( ) function is different from most functions because it can take a 
large number of parameters. To use the list ( ) function, you need to know 
exactly how many items your array has and pass a different parameter to the 
list ( ) function for each array item. The list function doesn't return any- 
thing. It assigns the array elements to the variables you specify. Normally, 
functions return False if they fail, but if the list ( ) function fails, PHP just 
errors out and crashes. The list ( ) function (like array ( ) ), technically 
speaking, isn't a function at all, but rather is a language construct. 

Here is an example of the list ( ) function. This function takes an array with 
three items and stores each of the three items in a separate variable: 

list($varl, $var2, $var3 ) = $anArray; 




The list ( ) function works only on numerical arrays and assumes that the 
array index begins at 0. If you want to use the list ( ) function with associa- 
tive arrays, surround the array variable with the array_values ( ) function. 
(See http: / /us 3 . php .net /list for more information on the list ( ) 



function.) 
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Using split () and list () together 

■You can combine the split ( ) and the list ( ) functions to get one power- 



list ($fname, $lname, $position, $startDate, $salary, $age) = split (",", $line) ; 

The split ( ) generates an array that the list ( ) catches and distributes to 
variables. You can then take those variables and easily print them to the 
screen (or do anything else you might want with them): 

print "<p>$name<br /> $phone<br /> $email<br /> $comments</p>" ; 

Without the list ( ) function, you'd be stuck doing something like this: 

print "<p>" . $lineArray [0] . "<br />"; 

print $lineArray [1] . "<br />"; 

print $lineArray [2 ] . "<br />"; 

print $lineArray [3 ] . "</p>"; 

Not very convenient, is it? 
The CSV file read example 

This CSV file read example performs the following tasks: 

/. Opens a connection to a file 

2. Reads the text from the file, line by line 

3. Closes the connection to the file 
It. Connects to a database 

5. Builds an HTML table showing what was read from the file 

6. Builds a SQL statement to insert the data from the file into the database 

7. Inserts the data from the file into the database 

See Chapter 8 in this minibook for more on database connection and manip- 
ulation. The CD-ROM contains the full code, as well as the text file, used in 
this example. Figure 7-2 shows the HTML generated by this example. (See 
the "Creating a CSV file" section for this example's counterpart.) 

Here is the PHP code for the CSV file read example: 

<? 

//This is the CSV file we want to create 
$theFile = "employees . csv" ; 

//We want to read from the file, so use "r". 
$ theMode = " r " ; 

//prepare the employees array to hold the contents of the file 
$employees = array!) ; 
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//prepare the sql string for insert Book V 

$sql = " INSERT INTO employees VALUES " ; Chapter 7 



ccessfully connect to the file, do all of the file operations. S 

™ o 

e, print an error. ~ 
*/ — ■ s. 

a = 

if ($f ileConnection = f open ( $theFile, $theMode) ) { —-la 
print "<p>Opened file successfully</p> " ; q § 

o 3- 

while( ! feof ($f ileConnection) ) { <d" — 

$line = fgets ( $f ileConnection) ; w <d" 

CA 

$employees[] = split (",", $line) ; 

} 



//close the file 

if ( fclose { $f ileConnection) ) { 

print "<p>Closed the file connection successfully. </p>" ; 
}else{ 

print "<p>Unable to close the file connection. </p> " ; 

} 



//connect to the database 

$conn = mysql_connect { "localhost " , "xfd", "xfdl23") or die {mysql_error ( ) ) ; 
mysql_select_db ( " f ile_manipulation" , $conn) or die (mysql_error ( ) ) ; 



* prepare sql for insertion of data into employees table, and generate a table 

* showing the contents of the file 
*/ 

print "<table>"; 

for($i = 0; $i < (count ( $employees) -1 ) ; $i++) { 
$sql .= "("; 

$sql .= $employees [$i] [0] . ", "; 
$sql .= $employees [$i] [1] . ", " ; 
$sql .= $employees [$i] [2] . ", " ; 
$sql .= $employees [$i] [3] . ", " ; 
$sql .= $employees [$i] [4] . ", " ; 
$sql .= $employees [$i] [5] ; 
$sql .= ")"; 



if(($i + 1) < (count ( $employees) -1 )) { 

$sql .= ", "; 

} 

print "<tr>\n" ; 

f oreach ( $employees [$i] as $index=>$val) { 
print " \t<td>$val</td>\n" ; 

} 

print "</tr>\n\n" ; 

} 

print "</table>" ; 

//insert data into database 
$result = mysql_query($sql, $conn) ; 

}else{ 

print "<p>Unable to connect to the file.</p>"; 

} 



?> 
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Figure 7-2: 
The HTML 
file contains 
a table of 
the data 
read from 
the file. 




;tory Bookmaiks Tools tlelp 

E http:/yiQcalhost/XFD/xfd5.7/fileRead.php 



Bill 


Gates 


Co-Founder 


1975-04-04 


966667 


52 




Phil 




Senior Pro-am Manager 


2008-01-05 


165231 


36 




Charles 


Henders 


Janitor 


2001-03-23 


48352 


43 





Closed the file connection si 
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In the CSV file read example, the database was only written to once, at the 
very end of the program. The program could have written to the database as 
it read each line in, but that would have put much more strain on the server 
and made the program slower. Database reads and writes are very expensive 
in terms of processing time and memory for the server, in comparison to 
simple string concatenation in a PHP program. 



Working With File and Directory Functions 

Sometimes, you may need PHP to work with files in a directory. Say you have 
a reporting tool for a client. Each week, you generate a new report for the 
client and place it in a directory. You don't want to have to alter the page 
each time you do this, so instead, make a page that automatically generates 
a list of all the report files for the client to select from. This is the kind of 
thing you can do with functions like openddir ( ) and readdir ( ) . 

opendir ( ) 

Using the opendir ( ) function, you can create a variable (technically speak- 
ing, this type of variable is called a handle} that allows you to work with a 
particular directory 
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The opendir ( ) function takes one parameter: the path to the directory you Book V 
want to work with. The opendir ( ) function returns a directory handle Chapter 7 

ike a connection to the directory) on success and False on failure. 

-f 

Here is an example of the opendir ( ) function (see the "Generating the list g. £■ 

of file links" section to see the opendir ( ) function in action). This function 
stores a directory handle to the C : \xampp\htdocs\XFD\xf d5 . 7 directory 
in the $directoryHandle variable: <= 

$directoryHandle = opendir (" C : \xampp\htdocs\XFD\xf d5 . 7 ") ; 



— -ia 
a < 



readdir ( ) 

After you've opened the directory with the opendir ( ) function, you have a 
cursor pointed at the first file. At this point, you can read the filenames one 
by one with a while loop. To do this, you'll use the readdir ( ) function. 



The readdir ( ) function takes one parameter; the variable containing the 
directory handle created with the opendir ( ) function. The readdir ( ) 
function returns the name of a file currently being focused on by the cursor 
on success and False on failure. 



Here is an example of the readdir ( ) function. This function iterates 
through each file in the directory specified by $dp and assigns the filename 
of the current file to a new index in $f ileArray array: 



while ( $currentFile !== false) { 
$currentFile = readDir ( $dp) ; 
$filesArray[] = $currentFile; 

} 



The actual readdir ( ) function itself is readdir ( $dp) . For more on the 
readdir ( ) function, see the official PHP online documentation at 

http : / /us .php .net /function . readdir. 

In some circumstances, the readdir ( ) function might return non-Boolean 
values which evaluate to False, such as 0 or " " . When testing the return value 
of the readdir ( ) function, use === or ! ==, instead of == or ! =, to accommo- 
date these special cases. 



chdir ( ) 

If you want to create a file in a directory other than the directory that the 
PHP page creating the file is in, you need to change directories. You change 
directories in PHP with the chdir ( ) function. 
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If you want to be absolutely sure you're in the right directory before writing 
the file, you can use an if statement with the getcwd ( ) function. This is 

lu#u«jty a bit of overkill, but I wanted to at least make you aware of the function. 

|v\^5 ou t the PHP manual for more info on the getcwd ( ) function. 

The chdir ( ) function takes one parameter; the path to the directory you 
wish to work with. The chdir ( ) function returns True on success and False 
on failure. 

Here is an example of the chdir ( ) . This function changes to the C : \ 
xampp\htdocs\XFD\xf d5 . 7 directory: 

chdir ( "C: \xampp\htdocs\XFD\xfd5 .7" ) ; 

When you change to a directory; you're then free to write to it with the 
fwrite ( ) function (see the "fwriteO" section, earlier in this chapter). 

Generating the list of fite (inks 

Using the opendir ( ) and readdir ( ) functions, you can generate a list of 
links to the files in a directory. 

The file links list example performs the following tasks: 
/. Opens a directory 

2. Reads each filename in the directory into an array 

3. Prints a link to each file in the directory 

Here is the PHP code for the file links list example (see Figure 7-3 for the 
HTML generated by this example): 

<? 

$dp = opendir("C:\\xampp\\htdocs\\XFD\\xfd5.7\\") ; 

while ( $currentFile !== false) { 
$currentFile = readDir ( $dp) ; 
$filesArray[] = $currentFile; 

} 

$ output = " " ; 

foreach($filesArray as $aFile) { 

$output .= "<a href=\"$aFile\">$aFile</axbr />"; 

} 

print "<p>$output</p>" ; 
?> 
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Figure 7-3: 

A list of links 
to all files in 
the directory 
specified by 
the opendirO 
function. 
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On a Windows server, you have to escape the backslashes in the file path. 
You do this by adding a backslash before the backslashes in the file path. (So 
you would write C : \\xampp\\htdocs\\XFD\\xfd5 . 7\\ instead of 
C : \xampp\htdocs\XFD\xfd5 . 7\.) On a UNIX server, you don't have to do 
this because file paths use forward slashes (/) instead of backslashes (\). 

If you wanted just one particular file type, you could use regular expressions 
to filter the files. If I had wanted only the . txt and . dat files from the direc- 
tory, I could've run the files array through this filter to weed out the 
unwanted file types: 

$filesArray = preg_grep ( " /txt$ | dat$/ " , $filesArray) ; 

For more on regular expressions, check out the online PHP manual at 

http : / /us .php . net/preg_grep. 
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In This Chapter 

W Building the connection string 
v* Sending queries to a database 

Retrieving data results 
v* Formatting data output 
]^ Allowing user queries 
v Cleaning user-submitted data requests 



m Bata has become the prominent feature of the Web. As you build more 
sophisticated sites using XHTML and CSS, you will eventually feel the 
need to incorporate data into your Web sites. You can do a certain amount 
of data work with the basic data structures built into PHP. Increasingly, Web 
sites turn to relational database management systems (RDBMSs) to handle 
their data needs. The RDBMS is a special program which accepts requests, 
processes data, and returns results. 

This chapter assumes you already have a database available, and you have 
some basic knowledge of how SQL (the language of databases) works. If you 
are unfamiliar with these topics, please look over Book VI, which describes 
using data in detail. 



Retrieving Data from a Database 

PHP programmers frequently use MySQL as their preferred data back end. 
There are a number of good reasons for this: 

♦ MySQL is open source and free. Like PHP, MySQL is open source, so 
PHP and MySQL can be used together (with Apache) to build a very 
powerful low-cost data solution. 

♦ MySQL is very powerful. MySQL's capability as a data program has 
improved steadily, and it is now nearly as capable as commercial tools 
costing thousands of dollars. (And it is better than many that cost hun- 
dreds of dollars.) 
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♦ PHP has built-in support for MySQL. PHP includes a number of functions 
specifically designed to help programmers maintain MySQL databases. 



probably already have MySQL. If you installed XAMPP, you proba- 
already have an installation of MySQL ready to go. 

♦ MySQL was designed with remote control in mind. MySQL is meant to 
be managed from some other program (like the code you write in PHP). It's 
not designed with a user interface (like Access has), but it's designed from 
the beginning to be controlled through a programming language like PHP. 



Before diving into details, here's an overview of how you get information to 
and from a MySQL database: 

/. Establish a connection. 

Before you can work with a database, you must establish a relationship 
between you PHP program and the database. This process involves iden- 
tifying where the database is and passing it a username and password. 

2. Formulate a query. 

Most of the time, you'll have some sort of query or request you want to 
pass to the database. You may want to see all the data in a particular table, 
or you may want to update a record. In either case, you use Structured 
Query Language (SQL) to prepare a request to pass to the database. 

3. Submit the query. 

Once you've built the query, you pass it (through the connection) to the 
database. Assuming the query is properly formatted, the database will 
process the request and return a result. 

4. Process the result. 

The database returns a special variable containing the results of your 
query. You'll generally need to pick through this complex variable to find 
all the data it contains. (For example, it can contain hundreds of records.) 

5. Display output to the user. 

Most of the time, you'll process the query results and convert them to 
some sort of XHTML display the user can view. 



As an example, take a look at contact . php in Figure 8-1. 



The contact .php program contains none of the actual contact information. 
All the data was extracted from a database. Here's an overview of the code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>showContact . php</ title> 
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Figure 8-1: 

This pro- 
gram gets all 
the contact 
data from a 
database. 



^ <P [3 httD://lo=al t iost/)(fd/or.ixfdOSOa_AR_AH/CDntact.php 



rompanv: Microsoft 
email: bilTrtmsBobcom 

contactlD: 2 
name: Steve Jobs 
company: Apple 

email: steve SrememberXewton.com 

contactlD: 2 
name: Linus Torvalds 
company: Linux Foundation 
email: linusSgnuWho.org 

contactlD: 4 
name: Andy Harris 
company: Wiley Press 
email: and". ";; aliarris3ooks.net 
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</head> 

<body> 

<p> 

<?php 

$conn = mysql_connect ( "localhost" , "user" , "password" ) or die (mysql_error ( ) ) ; 
mysql_select_db ( "xf d" ) ; 

$sql = " SELECT * FROM contact"; 

$result = mysql_query ( $sql , $conn) or die (mysql_error ( ) ) ; 

while($row = mysql_fetch_assoc ($result) ) { 

foreach ($row as $name => $value) { 
print "$name: $value <br />\n" ; 

} // end foreach 

print "<br /> \n" ; 
} // end while 

?> 

</p> 
</body> 
</html> 



If you want to try this program at home, begin by running the buildContact 
Autoincrement . sql script (available in Book VI, Chapter 2) in your copy of 
MySQL. This will ensure you have the database created. See Book VI, Chapter 2 
if you need more information on creating databases. 
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ey to all database work is the connection. Database connections 

me of the pneumatic tubes at some bank drive-through locations, 
's a little container you can stick your request into. You press a button, 
and the container shoots through a tube to the teller, who processes your 
request and sends you the results back through the tube. 



In data programming, the connection is like that tube. It's the pipeline 
between your program (your car) and the data (the bank). To establish a 
data connection, you need to know four things: 

♦ The hostname (where the server is): Often, the data server will be 
housed on the same physical machine as the Web server and PHP pro- 
gram. In these cases, you can use localhost as the server name. Test 
servers using XAMPP almost always use localhost connections. If 
you're working in a production environment, you may need to ask your 
service provider for the server address of your database. 

♦ Your database username: Database programs should always have some 
type of security enabled. (See Book VI, Chapter 1 for information on setting 
up database users and passwords.) Your program needs to know the user- 
name it should use for accessing the data. (I often create a special user- 
name simply for my programs. Chapter 1 of Book VI outlines this process.) 

When you first install MySQL through XAMPP, it allows root access with 
no password. These settings allow anybody to do anything with your 
data. Obviously, that's not a good solution, security-wise. Be sure to set 
up at least one username and password combination for your database. 
If you're using an online hosting service, you probably don't have root 
access. In this case, you typically have a new user created for each data- 
base you build. Book VI explains all. 

♦ A password for the database: The username is not secure without a 
password. Your PHP program also needs a password. This is established 
when you create the database. 

If you're going to make your source code available (as I do on the CD 
and Web site), be sure to change the username and password so people 
can't use this information to hack your live data. 

♦ The database name: A single installation of MySQL can have many data- 
bases available. You'll typically have a separate database designed for 
each project you build. MySQL needs to know which particular database 
houses the information you're seeking. 



Building a connection 



The data connection is created with the mysql_connect ( ) function. Here's 
how to do it: 
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1. Create a variable to house the connection. Book V 

Chapter 8 

When you build a connection, a special variable is created to house 
mation about that variable. I usually call my connection $conn: 

3 e-a 

$coim = mysql_connect ( "localhost" , "user" , "password" ) or ° 
die (mysql_error ( ) ) ; 0 g 

2. Invoke the mysql_connect ( ) function. o> 5- 

ST to 

This function (usually built into PHP) attempts to build a connection to S" S 

the database given all the connection information: 

$conn = mysql_connect ( "localhost" , "user" , "password" ) or 
die (mysql_error ( ) ) ; 

3. Pass the hostname, username, and password to mysql_connect ( ) . 

These three values are required parameters of the mysql_connect ( ) 
function: 

$conn = mysql_connect ( "localhost" , "user" , "password" ) or 

die (mysql_error ( ) ) ; 

You'll need to supply your own username and password. My values here 
are just samples. 

if. Prepare for a graceful crash. 

It's very possible that something will go wrong when you attempt a data 
connection. The or die ( ) clause tells PHP what to do if something 
goes wrong while making the connection: 

$conn = mysql_connect ( 11 localhost ", "user" , "password" ) or 
die (mysql_error ( ) ) ; 

How many times in your life have you heard that phrase? "Prepare for a 
graceful crash." You've got to love programming. 

5. Invoke mysql_error ( ) if something goes wrong. 

If there's a problem with the MySQL connection, the error message 
will come from MySQL, not PHP. To ensure that you see the MySQL 
error, use the mysql_error ( ) function. If you made a mistake (like 
misspelling the username), MySQL will report this error to PHP. 
Use mysql_error ( ) to print out the last error from MySQL: 

$conn = mysql_connect ( "localhost" , "user" , "password" ) or 
die (mysql_error() ) ; 

6. Specify the particular database. 

Once you're connected to the server, you need to specify which 
database on the server will be used for your transaction. I'm using 
a database called xf d for all the examples in this book. The 
mysql_select_db ( ) function is used to handle this task: 

mysql_select_db ( "xf d" ) ; 
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Passing a query to the database 

IThereason for connecting to a database is to retrieve data from it (or to add 
1 1 IJ [J IJ fj n2dify data, but the basic approach is always the same). In any case, you 
l"^ neeTrro pass instructions to the database in SQL. (If you're unfamiliar with 

SQL, it is described in Book VI, Chapter 1.) 



Your PHP program usually constructs an SQL statement in a string variable 
and then passes this value to the database. For this basic example, I specify 
the entire query. See the section "Processing the input," later in this chapter, 
for some warnings about how to incorporate user information in data queries. 

The showContact . php program simply asks for a list of all the values in the 
contact table of the xf d database. The SQL query for displaying all the 
data in a table looks like this: 



SELECT * FROM contact; 



To use an SQL statement, package it into a string variable, like this: 

$sql = " SELECT * FROM contact"; 

Note that you don't need to include the semicolon inside the string variable. 
You can call the variable anything you wish, but it's commonly called $sql. 
SQL queries can get complex, so if the SQL requires more than one line, you 
may want to encase it in a heredoc. (See Chapter 2 of this minibook for infor- 
mation on using heredocs.) 

Pass the request to the database using the msql_query ( ) function: 

$result = mysql_query($sql, Sconn) or die (mysql_error ( ) ) ; 

The mysql_query ( ) function has a lot going on. Here's how you put it together: 

/. Create a variable to house the results. 

When the query is finished, it will send results back to the program. The 
$result variable will hold that data: 

$result = mysql_query($sql, $conn) or die (mysql_error ( ) ) ; 

2. Invoke mysql_query ( ) . 

This function passes the query to the database: 

$result = mysql_query ($sql, $conn) or die (mysql_error ( ) ) ; 

3. Send the query to the database. 

The first parameter is the query. Normally, this is stored in a variable 
called $sql: 

$result = mysql_query ( $sql , $conn) or die (mysql_error ( ) ) ; 
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6. Specify the connection. 

The^second parameter is the connection object created when you ran 
l_connect ( ) . If you leave out the connection object, PHP uses 
ast MySQL connection that was created: 

$result = mysql_query($sql, $conn) or die (mysql_error ( ) ) ; 

5. Handle errors. 

If there's an error in your SQL request, MySQL will send back an error 
message. Prepare for this with the or die ( ) clause (just like you used 

for mysql_connect ( ) ): 

$result = mysql_query($sql, $conn) or die (mysql_error ( ) ) ; 

6. Return the MySQL error if there was a problem. 

If something went wrong in the SQL code, have your program reply with 
the MySQL error so you'll at least know what went wrong: 

$result = mysql_query($sql, $conn) or die (mysql_error ( ) ) ; 

Processing the results 

The results of an SQL query are usually data tables, which are a complex 
data structure. The next step when you work with a database is to get all the 
appropriate information from the $request object and display it in a 
XHTML output for the user to understand. 

This process is a little involved because SQL results are normally composed 
of two-dimensional data. A query result typically consists of multiple records 
(information about a specific entity — sometimes also called a row). Each 
record consists of a number of fields (specific data about the current record). 

I'm tossing a bunch of database terms at you here. Databases deserve (and 
have) a minibook of their own. If nothing in this chapter makes sense to you, 
build your own copy of the contact database following the instructions in 
Book VI and then come back here to have your program present that data 
through your Web site. 

The $request variable has a lot of data packed into it. You get that data out 
by using a pair of nested loops: 

/. The outer loop extracts a record at a time. 

The first job is to get each record out of the request, one at a time. 
2. Use another loop to extract each field from the record. 

Once you've got a record, you'll need to extract each field from the record. 
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Here's all the code for this segment (I explain it in detail in the following 
sections): 



*^row = mysql_f etch_assoc ( $result) ) { 
■Wach ($row as $name => $value) { 
print "$name: $value <br />\n"; 
} // end foreach 
print "<br /> \n" ; 
// end while 



Extracting the yovOs 

The first task is to break the $result object into a series of variables that 
each represent one record (or row). Here's the line that does the job: 

while($row = mysql_f etch_assoc ( $result) ) { 

To break a result into its constituent rows, follow these steps: 

/. Begin awhile loop. 

This code will continue as long as more rows are available in the result 
object: 

while($row = mysql_f etch_assoc ( $result) ) { 

2. Extract the next row as an associative array. 

Every time through the loop, you'll extract the next row from the result. 
There are several functions available for this task, but I use 
mysql_f etch_assoc ( ) because I think it's easiest to understand (see 
the sidebar "MySQL fetch options" for some other options and when you 
might choose them): 

while{$row = mysql_f etch_assoc ( $result) ) { 

3. Pass the resulting object to a variable called $row. 

The output of mysql_f etch_assoc is an array (specifically, an associa- 
tive array). Copy that value to a variable called $row: 

while($row = mysql_fetch_assoc ($result) ) { 

4. Continue as long as there are more rows to retrieve. 

mysql_f etch_assoc ( ) has an important side effect. In addition to 
extracting an associative array from $result, the function returns the 
value false if no more records are left. Because I'm using this state- 
ment inside a condition, the loop will continue as long as there is 
another row available. When there are no rows left, the assignment will 
evaluate to false, and the loop will exit. 

while($row = mysql_f etch_assoc ( $result ) ) { 
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'a from a MySQL result in 

four different ways: 

mysql_f etch_row( ) creates an ordi- 
nary (numeric index) array fromthe current 
row. 

\^ mysql_f etch_assoc ( ) creates an 
associative array from the current row, 
with the field name as the key and field 
value as the value in each key/value pair. 

mysql_f etch_array ( ) can be used 
to get numeric or associative arrays, based 
on a parameter. 

mysql_f etch_object ( ) returns a 
PHP object corresponding to the current 
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row. Each field in the row is a property of 
the object. 

In general, the mysql_f etch_assoc ( ) 
provides the best combination of ease-of-use 
and information. Use 

mysql_f etch_array ( ) when you don't 
need the field names (for example, you're using 
an XHTML table for output, and you're getting 
the field names from the 
mysql_f etch_f ield ( ) function). The 
mysql_f etch_obj ect ( ) technique is 
useful if you're going to build a complete object 
based on a query row, but that is beyond the 
scope of this book. 



Extracting fields from a row 

Each time you go through the while loop described in the previous section, 
you'll have a variable called $row. This will be an associative array contain- 
ing all the field names and values from the current form. If you know a field 
name, you can access it directly. For example, I know the contact table has 
a field named company, so you can use an associative array lookup to see 
the current company name: 

print $row[ "company" ] ; 

This will print the company name of the current record. 

More often, you will want to print out all the information in the row, so you 
can use the special form of f oreach ( ) loop used with associative arrays: 

foreach ($row as $name => $value) { 

Here's how it works: 

/. Set up the foreach loop. 

This form of for loop automatically loads variables with members of 
the array: 



foreach ($row as $name => $value) { 



6U Retrieving Data from a Database 



DropBook§ 




2. Analyze the $row array. 

The $row variable contains an associative array, so it's a perfect candi- 
te for this type of loop: 

foreach ($row as $name => $value) { 

3. Assign each key to $name. 

On each pass of the loop, assign the current key of the array (which will 
contain the current field name) to the variable $name: 

foreach ($row as $name => $ value) { 

It. Indicate the relationship between $name and $ value with the => 
operator. 

This indicates that $name is the key and $value is the value in this 
relationship: 

foreach ($row as $name => $value) { 

5. Assign the value to $value. 

The value of the current element will be placed in the $value variable: 

foreach ($row as $name => $ value) { 

When you use a foreach loop with an associative array, you assign each 
element to two variables because each element in an associative array has a 
name and a value. Check Chapter 5 of this minibook for more information 
about associative arrays and the foreach loop. 

Inside this loop, you'll have the name of the current field in a variable called 
$name and its value in a variable called $value. This loop will continue for 
each field in the current record. 



Printing the data 



For this simple example, I'm using the simplest way I can think of to print out 
the contents: 



print "$name: $value <br />\n"; 



This line simply prints out the current field name, followed by a colon and 
the current field value. Because this simple line is inside the complex nested 
loops, it ends up printing the name and value of every field in the query 
result. Here's the whole chunk of code again: 



while($row = mysql_f etch_assoc ( $result) ) { 
foreach ($row as $name => $value) { 

print "$name: $value <br />\n"; 
} // end foreach 
print "<br /> \n" ; 

} // end while 
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The result isn't the most elegant formatting on the Internet, but it gets the Book V 

job done, and it's easy to understand. Note I added a <br /> tag at the end Chapters 
ne, so each field will appear on its own line of XHTML output. I also 
inal <br /> at the end of each for loop. This will cause a line g 
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Using <br /> tags for output is a pretty crude expedient. It's fine for a basic 
test, but <br /> tags are usually a sign of sloppy XHTML coding. Take a look 
at this variation called contactDL .php in Figure 8-2. 

Building definition fists 

Definition lists are designed for name/value pairs, so they're often a good 
choice for data in associative arrays. It's not too difficult to convert the basic 
data result program into a form that uses definition lists: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 
<title>contactDL .php</title> 
<style type = " text/ess "> 



dt { 

float: left; 
width: 7 em; 
font-weight: bold; 
clear: left; 

} 

dd { 

float: left; 

} 

dl { 

float: left; 
clear: left; 

} 

</style> 
</head> 

<body> 
<?php 

$conn = mysql_connect ( "localhost" , "user" , "password" ) or die (mysql_error ( ) ) ; 
mysql_select_db ( 11 xf d" ) ; 

$sql = " SELECT * FROM contact"; 

$result = mysql_query($sql, $conn) or die (mysql_error ( ) ) ; 



while($row = mysql_f etch_assoc ( $result) ) { 
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Figure 8-2: 

Now, the 
output of 
the query 
is in a nice 
definition list. 
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print " <dl> \n" ; 

foreach {$row as $name => $value) { 

print " <dt>$name</dt> \n" ; 

print " <dd>$value</dd> \n" ; 

} // end foreach 
print " </dl> \n" ; 
} // end while 

?> 

</body> 
</html> 



The general design is copied from contact .html, with the following 
changes: 

1. Add CSS styling for the definition list. 

Definition lists are great for this kind of data, but the default style is 
pretty boring. I added some float styles to make the data display better. 
(See Book III, Chapter 1 for how to use floating styles.) 

2. Put each record in its own definition list. 

The while loop executes once per record, so begin the definition list at 
the beginning of the while loop. The </dl> tag goes at the end of the 
while loop. Each pass of the while loop will create a new definition list. 
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3. Display the field names as <dt> elements. 

The^field name maps pretty well to the concept of a definition term, so 
ach $name value in a <dt></dt> pair. 



It. Place the values inside <dd> tags. 

The values will be displayed as definition data. Now, you have the con- 
tents of the data set up in a form that can be easily modified with CSS. 

Using XHTML tables for output 

The basic unit of structure in SQL is called a table because it's usually dis- 
played in a tabular format. XHTML also has a table structure, which is ideal 
for outputting SQL data. Figure 8-3 shows contactTable . php, which dis- 
plays the contact information inside an XHTML table. 

Tables are a very common way to output SQL results. There's one big differ- 
ence between table output and the techniques that have been shown else- 
where in this chapter. In a table, you have a separate row containing field 
names. Here's the code: 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf-8 " /> 
<title>contactTable .php</title> 
<style type = " text/ess "> 
table, th, td { 

border: lpx solid black; 

} 

</style> 
</head> 



<body> 

<hl>My Contacts</hl> 
<?php 

$conn = mysql_connect ( "localhost" , "user", "password"); 

mysql_select_db ( "xf d" ) ; 

$sql = " SELECT * FROM contact"; 

$result = mysql_query ( $sql , $conn) ; 



print " <table> \n" ; 



//get field names first 
print " <tr> \n" ; 

while ($field = mysql_fetch_field($result) ) { 

print " <th>$f ield->name</th> \n"; 

} // end while 
print " </tr> \n" ; 

while ($row = mysql_f etch_assoc ($result) ) { 
print " <tr> \n"; 

foreach {$row as $name => $value) { 

print " <td>$value</td> \n" ; 

} // end foreach 
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Figure 8-3: 

The contact 
information 
displayed in 
an XHTML 
table. 
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print " </tr> \n"; 

} // end while loop 
print " </table> \n"; 

?> 

</body> 
</html> 

This code is still very similar to the basic contact .php program. It extracts 
data from the database in exactly the same way. The main difference is the way 
field names are treated. The field names will go in table headings, and only the 
values are printed from each row. To make this work, follow these steps: 

7. Build a normal MySQL connection. 

Begin with the standard connection. Don't worry about formatting until 
you're reasonably certain you can read data from the database. 

2. Print the table tag before extracting any results. 



All the query data will be displayed inside the table, so print the table 
tag before you start printing anything that should go inside the table. 
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3. Print the table header row first. Book V 

Chapter 8 

The table headers must be printed before you can worry about the other 



|n 

//get field names first "^j § 

print " <tr> \n" ; 0 5 

j— CD 

while ($field = mysql_fetch_field($result) ) { oS 
print " <th>$f ield->name</th> \n" ; £5' 

} // end while g.™ 
print " </tr> \n" ; OS ° 

t/i QJ 

a 

if. Extract metadata from the result set with mysql_f etch_f ield ( ) . 

After you've gotten a result from a data query, you can learn a lot about 
the data by using the mysql_f etch_f ield ( ) function: 

while ($field = mysql_fetch_field($result) ) { 

This function (mysql_f etch_f ield ( ) ) extracts the next field object 
from the result and passes it to a variable called $f ield. It returns 
false if there are no more fields in the result, so it can be used in a 
while loop, like mysql_f etch_assoc ( ) . 

5. Print the field's name. 

The field is an object, so you can extract various elements from it easily. 
In this case, I'm interested in the field name. $f ield->name yields the 
name of the current field (see the sidebar, in this chapter, "More about 
metadata" for more information about information you can extract from 
field objects): 

print " <th>$f ield->name</th> \n" ; 

6. Print each row's data as a table row. 

Each row of the data result maps to a table row. Use the preceding varia- 
tion of nested loops to build your table rows. 

7. Finish off the table. 

The table tag must be completed. Don't forget to print </table> when 
you're done printing out all the table information. 

8. Clean up your XHTML. 

Check your code in a browser. Make sure it looks right, but don't stop 
there. Check with a Validator to make sure that your program produces 
valid XHTML code. View the source and ensure that the indentation and 
white space are adequate. Even though a program produced this code, it 
needs to be XHTML code you can be proud of. 
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! ve got a large database, you probably want to allow users to search 
ltabase. For example, the form in Figure 8-4 allows the user to search 
the My Contacts database. 



There's a couple of interesting things about the form in Figure 8-4: 



4- The search value can be anything. The first field is an ordinary text 
field. The user can type absolutely anything here (so you should expect 
some surprises). 

♦ The user selects a Held with a drop-down menu. You don't expect the 
user to know exactly what field names you are using in your database. 
Whenever possible, supply this type of information in a format that's 
easier for the user and less prone to error. 

♦ This form is built to fill in a query. The back-end program (search . 
php) will be constructing a query from data gathered from this form. 
The point of the form is to request two pieces of information from the 
user: a field to search in and a value to look for in that field, search . php 
will use the data gleaned from this form to construct and submit that 
query to the database. 



A swrch.html -Mozilla Firefox 0[n]0 

Fie Edit View H^tory Bookmarks Toorc Hek, Q 
<^ • • ^ ^ j!> □ hito:/.1ocalho5t..'x'd:ar.'xfojS0a_AR_Ah'sea'ci.hr-l j « fc> 



Search my contacts 



Search for Andy ^ in 


ID W 




[ submiiiequiiit 


ID 




company name 
email address 







Figure 8-4: 

The user 
can check 
for any 
value in 
any field. 



0 errors / 0 warnings O yjf 



Now: Sumy, 42= F 



Atfourinq User Interaction 621 



p! 




More about metadata 



Du"ran Trtfd buTcftrsorts of information about 
the table you're querying with the 

mysql_f etch_f ield ( ) function. 

This function returns an objectthat hasthe fol- 
lowing properties: 

V table: The name of the table the field 
(column) belongs to 

name: The field's name 

type: The field's datatype 

primary_key: If the field is a primary 
key, will return a 1 

V unique_key: If the field is a unique key, 
will return a 1 

f max_length: The field's maximum length 

V def : The field's default value (if any) 



not_null: If the field can't be null, will 
return a 1 

V multiple_key: If the field is a non- 
unique key, will return a 1 

»*" numeric: If the field is numeric, will 
return a 1 

blob: If the field is a blob, will return a 1 

unsigned: If the field is unsigned, will 
return a 1 

zerof ill: If the field is zero-filled, will 
return a 1 

You'll probably end up using table, name, 
type, primary_key, and max_length 
the most. Refer to any of these values using 
object-oriented syntax, so if you've got a field 
named $f ield, get its name with $f ield- 
>name. 



♦ The user doesn't know SQL. Even if the user does know SQL, don't let 
him use it. The SQL query should always be built on the server side. Get 
enough information to build an SQL query, but don't send a query to the 
PHP. (Doing so exposes your database to significant abuse.) 

♦ The form uses the post mechanism. From the XHTML perspective, it 
isn't important whether the form uses get or post, but when you're 
using forms to construct SQL queries, post is a bit safer because it 
makes the bad guys work a little bit harder to spoof your site and send 
bogus requests to your database. 

Building an XHTML search form 

Here's the XHTML code for search . html: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv=" content-type" content="text/xml; charset=utf -8 " /> 

<title>search.html</title> 

<link rel = "stylesheet" 

type = "text/ess" 

href = 11 search. ess" /> 
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</head> 
<body> 

>Search my contacts</hl> 



orm action = " search. php" 

method = "post"> 
<f ieldset> 

<label>Search for</label> 
<input type = "text" 

name = "srchVal" /> 



<label>in</label> 

<select name = "srchField"> 

<option value = "contactID">ID</option> 
<option value = "name">contact name</option> 
<option value = " company" >company name</option> 
<option value = "email">email address</option> 

</select> 

<button type = " submit ">submit request</button> 
</fieldset> 



</form> 
</body> 
</html> 



It's really a pretty basic form. The interesting stuff happens in the 
search . php program that's triggered when the user submits this form. 



Responding to the search request 

When the user submits search . html, a page like Figure 8-5 appears, cre- 
ated by search . php. 

The search . php program isn't really terribly different from contactTable . 
php. It takes an SQL query, sends it to a database, and returns the result as 
an XHTML table. The only new idea is how the SQL query is built. Rather 
than pre-loading the entire query into a string variable, as I did in all other 
examples in this chapter, I used input from the form to inform the query. 
As usual, I provide the code in its entirety here, then I point out specific 
features. Look at the big picture first: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>search.php</title> 
<style type = "text/ess" > 
table, th, td { 

border: lpx solid black; 

} 

</style> 
</head> 
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<body> 

<hl>My Contacts</hl> 
php 



rocesslnput ( ) ; 
suits ($sql) ; 



function processlnput ( ) { 

//extract information from previous form and build a safe query 

$srchVal = $_POST [ "srchVal" ] ; 

$srchField = $_POST [ "srchField" ] ; 

$srchVal = mysql_real_escape_string($srchVal) ; 

$srchField = mysql_real_escape_string ( $srchField) ; 

$sql = " SELECT * FROM contact WHERE $srchField LIKE '%$srchVal%' 
return $sql; 

} // end processlnput 

function printResults ( $sql) { 

$conn = mysql_connect ( "localhost" , "user", "password"); 
mysql_select_db ( "xfd" ) ; 

$result = mysql_query($sql, $conn) ; 

print " <table> \n"; 
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Figure 8-5: 

The program 
searches the 
database 
according 
to the para- 
meters in 
search.html. 



search. php - Mozilla Firefox 



- as 



File Edit Viev-. histo'y Soo^*"^ Toote Help 

<A • - ft J& H httpv'QCfl:ioE:'. f 3'iir' > [ ci;50;_AR_Ah5e3':i.DhD 



- > [Gj- 



My Contacts 



andv a all arris Bocks, net 



^ 0 errors / 0 warnings Q \ 



Nov.: Sumy, 4Z°F Sun:59'F<a(* Mon:29<>F<^ 



Allowing User Interaction 



■ whi 

oks 

pri: 



//get field names first 
print " <tr> \n"; 

while ($field = mysql_f etch_f ield($result ) ) { 
" <th>$f ield->name</th> \n" ; 

/ end while 
print " </tr> \n"; 



while ($row = mysql_fetch_assoc ($result) ) { 
print " <tr> \n"; 

foreach ($row as $name => $value) { 

print " <td>$value</td> \n"; 

} // end foreach 
$ count ++ ; 

print " </tr> \n" ; 

} // end while loop 

print " </table> \n"; 
} // end printResults 
?> 

</body> 
</html> 



Breaking the code into functions 

This code is complex enough to deserve functions. The program has two 
main jobs, so it's not surprising that a function is designated to perform each 
major task. Here's the main section of the PHP code: 

$sql = processlnput ( ) ; 
printResults { $sql) ; 

This code fragment nicely summarizes the entire program (as well-designed 
main code ought to do). Here's the overview: 

/. Designate a variable called $sql to hold a query. 

The central data for this program is the SQL query. 

2. Create the query with processlnput ( ) . 

The job of processlnput ( ) is to get the data from the search.html 
form and create a safe, properly-formatted query, which will be passed 
to the $sql variable. 

3. Process the query with the printResults ( ) function. 

This function will process the query and format the output as an XHTML 
table. 

Processing the input 

The processlnput ( ) function does just what it says — processes input: 

function processlnput () { 

//extract information from previous form and build a safe query 
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$srchVal = $_POST [ "srchVal" ] ; BookV 

$srchField = $ POST [ "srchField" ] ; „. . . 

~ Lhapter 8 

= mysql_connect { "localhost" , "user", "password"); 

r al = mysql_real_escape_string($srchVal, $conn) ; 2o 
rchField = mysql_real_escape_string { $srchField, $conn) ; "< o 

O = 

$sql = "SELECT * FROM contact WHERE $srchField LIKE ' %$srchVal% 1 " ; j| 
return $sql; 5* 3" 

ST to 

} // end processlnput !^ ° 

It works by doing several small but important tasks: 

/. Retrieve values from the form. 

The key values for this program are $srchval and $srchField. They 
both come from the previous form. Note that I used $_POST rather than 
$_request because post requests are mildly harder to hack than get, 
and I really don't want anybody spamming my database: 

$srchVal = $_POST [ "srchVal " ] ; 
$srchField = $_POST [ "srchField" ] ; 



2. Filter each field with mysql_real_escape_string ( ) . 

You never want to use input from a form without passing it through a 
security check. It's quite easy for a bad guy to post additional text in the 
query that could cause you a lot of headaches. This bit of nastiness is 
commonly called a SQL injection attack. Fortunately PHP provides a very 
useful function for preventing this sort of malice. The 
mysql_real_escape_string ( ) function processes a string and strips 
out any potentially dangerous characters, effectively minimizing the 
risks of SQL injection ickiness. The second parameter of 
mysql_real_escape_string ( ) is the name of the data connection, 
so I make a connection and pass it as a parameter: 

$conn = mysql_connect ( "localhost" , "xfd" , "xfdaio"); 
$srchVal = mysql_real_escape_string ($srchVal , $conn) ; 
$srchField = mysql_real_escape_string ( $srchField, $conn) ; 

For more on database security and preventing SQL injection attacks, a 
good place to start is this document in the PHP online manual: 

http: //us 3 . php .net /manual /en/ security -database . sql -inject ion. php 

3. Embed the cleaned-up strings in the $sql variable. 

Now, you can build the query comfortably Note that a like clause is 
more likely to provide the kinds of results your user is expecting. Also, 
don't forget that SQL often requires single quotes (see Book VI, Chapter 
2 for more on building like clauses): 

$sql = "SELECT * FROM contact WHERE $srchField LIKE ' %$srchVal% ' " ; 
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The query is now ready to be sent back to the main code segment, 
ich will pass it on to the next function: 

return $sql; 



Generating the output 

Now that query is complete, the job of printResults ( ) is quite easy. This 
code is really just a copy of the contactTable . php code packaged into a 
function: 

function printResults ($sql) { 

$conn = mysql_connect ( "localhost" , "user", "password"); 
mysql_select_db ( "xfd" ) ; 

$result = mysql_query($sql, $conn) ; 

print " <table> \n"; 

//get field names first 
print " <tr> \n"; 

while ($field = mysql_fetch_field($result) ) { 

print " <th>$f ield->name</th> \n" ; 

} // end while 
print " </tr> \n"; 

while ($row = mysql_fetch_assoc ($result) ) { 
print " <tr> \n"; 

foreach ($row as $name => $value) { 

print 11 <td>$value</td> \n" ; 

} // end foreach 
$ count ++ ; 

print " </tr> \n" ; 

} // end while loop 

print " </table> \n"; 
} // end printResults 

There's only one twist here: SQL is now a parameter. This function won't 
create the $sql variable itself. Instead, it accepts $sql as a parameter. I 
took out the line that created $sql as a hard-coded query because now 
I want to implement the query created by processlnput ( ) . Otherwise, 
the code in this function is a direct copy of contactTable .php. 



DropBooks 



Book VI 



Databases with MySQL 



DBDesigner 4 - [DB Model | Noname2] 



5 5« Edit Djsptoy Database Plugms Options Windows Help 



hero » 

t heroID: INTEGER(ll) 

<> name: VARCHAR(50) 

Q birthday: DATE 

* missionID: INTEGER(ll) (FK) 



S? Many 



:: One 



Many 



mission 



V missionID: INTEGER(ll) 
O description: VARCHAR(50) 
O villain: VARCHAR(30) 
ft plot: VARCHAR(50) 



Many 



power 



1 powerlD: INTEGER(ll) 



v name: VARCHAR(50) 




2, FLOAT 



ivARCHAR 



V DATETIME 



^BODL 



^LONGBLCiG 
^Varchai(20] 
i^Vafchat«5| 
ii,Varchai(255| 



All Tables 
El -M- 

E c-i :■" 
E ifl power 



t3 « 



Well-defined data is the central element 
in most commercial Web sites. 
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In This Chapter 

Understanding databases, tables, records, and fields 
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Introducing a three-tier model 
Understanding MySQL data types 

V Getting started with MySQL and phpMy Admin 

V Adding a password to your MySQL root account 
Creating new MySQL users 

Designing a simple table 
v Adding data to the table 



ost programs and Web sites are really about data. Data drives the 
Internet, so you really need to understand how data works and how 
to manage it well if you want to build high-powered modern Web sites. 

The trend in Web development is to have a bunch of specialized languages 
that work together. XHTML describes page content, CSS manages visual 
layout, JavaScript adds client-side interactivity, and PHP adds server-side 
capabilities. You're probably not surprised when I tell you that yet another 
language, SQL (Structured Query Language), specializes in working with data. 

In this minibook, you discover how to manage data. Specifically, you find 
out how to create databases, add data, create queries to retrieve data, and 
create complex data models to solve real-world problems. In this chapter, I 
show you some automated tools that automate the process of creating a 
data structure and adding data to it. In later chapters in this minibook, I 
show how to control the process directly through SQL. 

Examining the Basic Structure of Data 

Data has been an important part of programming from the beginning. Many 
languages have special features for working with data, but through the years, 
a few key ideas have evolved. A system called relational data modeling has 
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become the primary method for data management, and a standard language 
for this model, called SQL (Structured Query Language), has been developed. 

s two major components: 

♦ Data Definition Language (DDL) is a subset of SQL that helps you create 
and maintain databases. You use DDL to build your databases and add 
data to them. 

♦ Data Query Language (DQL) is used to pull data out of a database after 
it's been placed there. Generally, your user input is converted to queries 
to get information from an existing database. 

The best way to think about data is to simply look at some. The following 
table contains some basic contact information: 



Name Company E-mail 

Bill Gates Microsoft bill@msBob.com 

Steve Jobs Apple steve@rememberNewton.com 

Linus Torvalds Linux Foundation linus@gnuWho.org 

Andy Harris Wiley Press andy@aharrisBooks.net 




All these e-mail addresses are completely made up (except mine). Bill Gates 
hasn't given me his actual e-mail address. He doesn't answer my calls, 
either. . . . (sniff). 



It's very common to think of data in the form of tables. In fact, the fancy offi- 
cial database programmer name for this structure is table. A table (in database 
terms) is just a two-dimensional representation of data. Of course, some fancy 
computer-science words describe what's in a table: 

♦ Each row is a record. A record describes a discrete entity. In this table, 
each record is a person in an e-mail directory. 

4- A record is made of fields. All the records in this table have three 
fields: name, company, and e-mail. Fields are a lot like variables in pro- 
gramming languages; they can have a type and a value. Sometimes, 
fields are also called columns. 

♦ A collection of records is a table. All records in a table have the same 
field definitions but can have different values in the fields. 

♦ A bunch of tables makes a database. Real-world data doesn't usually 
fit well in one table. Often, you'll make several different tables that work 
together to describe complex information. The database is an aggregate 
of a bunch of tables. Normally, you restrict access to a database through 
a user and password system. 
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Determining the fields in a record 

If tou want to create a database, you need to think about what entity you're 
J | fj fj fj fja^rfctfig and what fields that entity contains. In the table in the preceding 
P"^ ^ectrorfH'm describing e-mail contacts. Each contact requires three pieces of 

information: 



♦ Name: Gives the name of the contact, in 50 characters or less. 




♦ Company: Describes which company the contact is associated with, in 30 
characters or less. 

♦ E-mail: Lists the e-mail address of the contact, in 50 characters or less. 

Whenever you define a record, begin by thinking about what the table repre- 
sents and then think of the details associated with that entity. The topic of 
the table (the kind of thing the table represents) is the record. The fields are 
the details of that record. 

Before you send me e-mails about my horrible data design, know that I'm 
deliberately simplifying this table. Sure, it should have separate fields for 
first and last name, and it should also have a primary key. If you don't know 
about that stuff yet, I talk about them later in this minibook, as well as in the 
section "Defining a primary key," later in this chapter. If you do know about 
them already, you probably don't need to read this section. For the rest of 
you, you should start with a simple data model, and I promise to add all 
those goodies soon. 
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Introducing SQL data types 

Each record contains a number of fields, which are much like variables in 
ordinary languages. Unlike scripting languages, such as JavaScript and PHP 
(which tend to be free-wheeling about data types), databases are particular 
about the type of data that goes in a record. 

Table 1-1 illustrates several key data types in MySQL (the variant of SQL 
used in this book). 



Table 1-1 


MySQL Data Types 


Data Type 


Description 


Notes 


INT (INTEGER) 


Positive or negative integer 
(no decimal point) 


Ranges from about -2 billion to 2 
billion. Use BIGINT for larger integers. 


DOUBLE 


Double precision floating point 


Holds decimal numbers in scientific 
notation. Use for extremely large or 
extremely small values. 



(continued) 
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Table 1-1 (continued) 
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Description 


Notes 




Date stored in YYYY-MM-DD 
format. 


Can be displayed in various formats. 


TIME 


Time stored in HH:MM:SS format 


Can be displayed in various formats. 


CHARUength) 


Fixed-length text 


Always same length. Shorter text is 
padded with spaces. Longer text is 
truncated. 


VARCHAR(/e/i£ftf7) 


'variable'-length text 


Still fixed length, but trailing spaces 
are trimmed. Limit 256 characters. 


TEXT 


Longer text 


Up to 64,000 (roughly) characters. Use 
LONGTEXT for more space. 


BLOB 


Binary data 


Up to 64K of binary data. LONGBLOB 
for more space. 




I list only the most commonly used data types in Table 1-1. These data types 
handle most situations, but check the documentation of your database pack- 
age if you need some other type of data. 



Specifying the length of a record 

Data types are especially important when you're defining a database. 
Relational databases have an important structural rule: Each record in a 
table must take up the same amount of memory. This rule seems arbitrary 
but it's actually very useful. 

Imagine that you're looking up somebody's name in a phone book, but 
you're required to go one entry at a time. If you're looking for Aaron Adams, 
things will be pretty good, but what if you're looking for Zebulon Zoom? This 
sequential search would be really slow because you'd have to go all the way 
through the phone book to find Zebulon. Even knowing that Zeb was in 
record number 5,379 wouldn't help much because you don't know exactly 
when one record ends and another begins. 

If you're name is really Zebulon Zoom, you have a very cool name — a good 
sign in the open source world, where names like Linus and Guido are really 
popular. I figure the only reason I'm not famous is my name is too boring. I'm 
thinking about switching to a dolphin name or something. (Hi, my name is 
"Andy Squeeeeeeek! Click Click Harris.") 

Relational databases solve this problem by forcing each record to be the 
same length. Just for the sake of argument, imagine that every record takes 
exactly 100 bytes. You would then be able to figure out where each record is 
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on the disk by multiplying the length of each record by the desired record's 
index. (Record 0 would be at byte 0, record 1 is at 100, record 342 is at 34200, 
) This mechanism allows the computer to keep track of where all 
ds are and jump immediately to a specific record, even if hundreds 
or thousands of records are in the system. 




My description here is actually a major simplification of what's going on, but 
the foundation is correct. You should really investigate more sophisticated 
database and data structures classes or books if you want more information. 
It's pretty cool stuff. 

The length of the record is important because the data types of a record's 
fields determine its size. Numeric data (integers and floating point values) 
have a fixed size in the computer's memory. Strings (as used in other pro- 
gramming languages) typically have dynamic length. That is, the amount of 
memory used depends on the length of the text. In a database application, 
you rarely have dynamic length text. Instead, you generally determine the 
number of characters for each text field. 



defining a primary key 



When you turn the contact data into an actual database, you generally add 
one more important field. Each table should have one field that acts as a pri- 
mary key. A primary key is a special field that's 

♦ Unique: You can't have two records in a table with the same primary key. 

♦ Guaranteed: Every record in the table has a value in the primary key. 

Primary key fields are often (though not always) integers because you can 
easily build a system for generating a new unique value. (Find the largest key 
in the current database and add one.) 

In this book, each table has a primary key. They are usually numeric and are 
always the first field in a record definition. I also end each key field with the 
letters ID to help me remember it's a primary key. 
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Primary keys are useful because they allow the database system to keep a 
Table of Contents for quick access to the table. When you build multitable 
data structures, you can see how you can use keys to link tables together. 



Defining the table structure 

When you want to build a table, you begin with a definition of the structure of 
the table. What are the field names? What is each field's type? If it's text, how 
many characters will you specify? 
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The table definition for the e-mail contacts table may look like this: 



DropBoo 



IBeMJ^ame 


type 


Length (Bytes) 




INTEGER 


11 


Name 


VARCHAR 


50 


Company 


VARCHAR 


30 


E-mail 


VARCHAR 


50 



Look over the table definition, and you'll notice some important ideas: 

♦ There's now a contactID field. This field serves as the primary key. It's 
an INTEGER field. 

♦ INTEGERS are automatically assigned a length. It isn't necessary to 
specify the size of an INTEGER field (as all INTEGERS are exactly 1 1 
bytes long in MySQL). 

♦ The text fields are all VARCHARs. This particular table consists of a lot 
of text. The text fields are all stored as VARCHAR types. 

4- Each VARCHAR has a specified length. Figuring out the best length can 
be something of an art form. If you make the field too short, you aren't 
able to squeeze in all the data you want. If you make it too long, you 
waste space. 



VARCHAR isn't quite variable length. The length is fixed, but extra spaces are 
added. Imagine that I had a VARCHAR(IO) field called userName. If I enter 
the name Andy', the field contains "Andy " (that is, Andy' followed 

by six spaces). If I enter the value 'Rumplestiltskin', the field contains the 
value "Rumplestil " (the first 10 characters of 'Rumplestiltskin'). 

The difference between CHAR and VARCHAR is what happens to shorter 
words. When you return the value of a CHAR field, all the padding spaces are 
included. A VARCHAR automatically lops off any trailing spaces. 

In practice, programmers rarely use CHAR because VARCHAR provides the 
behavior you almost always want. 

Introducing MySQL 

Programs that work with SQL are usually called relational database manage- 
ment systems (RDBMS). A number of popular RDBMSs are available: 

♦ Oracle is the big player. Many high-end commercial applications use the 
advanced features of Oracle. It's powerful, but the price tag makes it pri- 
marily useful for large organizations. 
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♦ MS SQL Server is Microsoft's entry in the high-end database market. It's 

usually featured in Microsoft-based systems integrated with .NET pro- 
l^grjwjiming languages and the Microsoft IIS server. It can also be quite 



♦ MS Access is the entry-level database system installed with most ver- 
sions of Microsoft Office. While Access is a good tool for playing with 
data design, it has some well-documented problems handling the large 
number of requests typical of a Web-based data tool. 

♦ MySQL is an open-source database that has made a big splash in the 
open-source world. While it's not quite as robust as Oracle or SQL 
Server, it's getting closer all the time. The latest version has features and 
capabilities that once only belonged to expensive proprietary systems. 

♦ SQLite is another open-source database that's really showing some prom- 
ise. This program is very small and fast, so it works well in places you 
wouldn't expect to see a full-fledged database (think cell phones and PDAs). 

The great news is that almost all these databases work in the same general 
way. They all read fairly similar dialects of the SQL language. No matter 
which database you choose, the basic operation is roughly the same. 



This book focuses on MySQL because this program is 

♦ Very accessible: If you've already installed XAMPP (see Book VIII), you 
already have access to MySQL. Many hosting accounts also have MySQL 
access built in. 

♦ Easy to use: You can use MySQL from the command line or from a spe- 
cial program. Most people manipulate SQL through a program called 
phpMyAdmin (introduced in the section "Setting Up phpMyAdmin," later 
in this chapter). This program provides a graphical interface to do most 
of the critical tasks. 

♦ Reasonably typical: MySQL supports all the basic SQL features and a 
few enhancements. If you understand MySQL, you'll be able to switch to 
another RDBMS pretty easily. 

♦ Very powerful: MySQL is powerful enough to handle typical Web server 
data processing for a small to mid-size company. Some extremely large 
corporations even use it. 

♦ Integrated with XAMPP and PHP: PHP has built-in support for MySQL, 
so you can easily write PHP programs that work with MySQL databases. 
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Why use MuSQL> 
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Understanding the three-tier architecture 

Modern Web programming often uses what's called the three-tiered architec- 
r^^s shown in Table 1-2. 



Table 1-2 


The Three-Tiered Architecture 


Tier 


Platform (Software ) 


Content 


Language 


Client 


Web browser (Firefox) 


Web page 


XHTML/CSS/JS 


Server 


Web server (Apache) 


Business rules 
and logic 


PHP (or other similar 
language) 


Data 


Data server (MySQL) 


Data content 


SQL (through MySQL or 
another data server) 



The user talks to the system through a Web browser, which manages XHTML 
code. CSS and JavaScript may be at the user tier, but everything is handled 
through the browser. The user then makes a request of the server, which is 
sometimes passed through a server-side language like PHP. This program then 
receives a request and processes it, returning HTML back to the client. Many 
requests involve data, which brings the third (data) tier into play. The Web 
server can package up a request to the data server through SQL. The data 
server manages the data and prepares a response to the Web server, which 
then makes HTML output back for the user. 

Figure 1-1 provides an overview of the three-tier system. 

Practicing With MySQL 

MySQL is a server, so it must be installed on a computer in order to work. To 
practice with MySQL, you have a few options: 

♦ Run your own copy of MySQL from the command line. If you have 
MySQL installed on your own machine, you can go to the command line 
and execute the program directly. This task isn't difficult, but it is tedious. 

♦ Use phpMyAdmin to interact with your own copy of MySQL. This solu- 
tion is often the best. phpMyAdmin is a set of PHP programs that allow 
you to access and manipulate your database through your Web browser. 
If you've set up XAMPP, you've got everything you need. (See Book VIII 
for more information about XAMPP.) You can also install MySQL and 
phpMyAdmin without XAMPP, but you should really avoid the headaches 
of manual configuration, if you can. In this chapter, I do all MySQL through 
phpMyAdmin, but I show other alternatives in Book V (where you can 
connect to MySQL through PHP) and Chapter 2 of this minibook. 

♦ Run MySQL from your hosting site. If you're using Free Hostia or some 
other hosting service, you generally access MySQL through phpMyAdmin. 
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Database 



Setting Up phpMyAdmin 




By far the most common way to interact with MySQL is through 
phpMyAdmin. If you've installed XAMPP, you already have phpMyAdmin. 
Here's how you use it to get to MySQL: 

/. Turn on MySQL with the XAMPP Control Panel, shown in Figure 1-2. 

You also need Apache running (because XAMPP runs through the 
server). You don't need to run MySQL or Apache as a service, but you 
must have them both running. 

2. Go to the XAMPP main directory in your browser. 

If you used the default installation, you can just point your browser to 
http: //localhost/xampp. It should look like Figure 1-3. 

Don't just go through the regular file system to find the XAMPP directory. 
You must use the localhost mechanism so that the PHP code in php 
MyAdmin is activated. 
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3. Find phpMyAdmin in the Tools section of the menu. 

The phpMyAdmin page looks like Figure 1-4. 
eate a new database. 



Type the name for your database in the indicated text field. I call my 
database xf d. (Xhtml For Dummies — get it?) 



Figure 1-2: 

Turning on 
MySQL and 
Apache. 



XAMPP Control Panel Application 
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Figure 1-3: 

Locating the 

XAMPP 

subdirectory 

through 

localhost. 
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Welcome to XAMPP for Windows Version 1.6.0a ■ 

Congratulations: 

You successfully installed XAMPP on this system! 

Now you can start using Apache and Co. Firstly you should try -Status" on the left navigation to make sure everything works fine. 
For OpenSSL support please use the test certificate with https:,- ■■ 12'. 0.0.1 or https://localhost 

And very important! Big thanks for help and support to Carsten, Nemesis, KriS, Boppy, Pc-Dummy and all other friends of XAMPP! 
Good luck, Kay Vogelgesang + Kai 'Oswald' Seidler 
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Figure 1-4: 

The php- 
MyAdmin 
main page. 
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Chanqinq the root password 

MySQL is a powerful system, which means it can cause a lot of damage in the 
wrong hands. Unfortunately, the default installation of MySQL has a security 
loophole you could drive an aircraft carrier through. The default user is 
called root and has no password whatsoever. Although you don't have to 
worry about any pesky passwords, the KGB can also get to your data with- 
out passwords, either. 

Believe me, the bad guys know that root is the most powerful account on 
MySQL and that it has no password by default. They're glad to use that infor- 
mation to do you harm (or worse, to do harm in your name). Obviously, 
giving the root account a password is a very good idea. Fortunately, it's not 
difficult to do. . . . 

1. Log into phpMyAdmin as normal. 

The main screen looks like Figure 1-5. Note the scary warning of gloom 
at the bottom. You're about to fix that problem. 

2. Click the Privileges link to modify user privileges. 

The new screen looks something like Figure 1-6. 
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Figure 1-5: 

Here's the 
main php- 
MyAdmin 
screen with 
a privileges 
link. 
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Your configuration file contains settings (root with no password) that correspond to the 
A default MySQL privileged account. Your MySQL server is running with this default, is 
open to intrusion, and you really should fix this security hole. 



Open new phpMyAdmin window 
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Figure 1-6: 

The various 
users are 
stored in a 
table. 
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USAGE NO 
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pma localhost 
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SHUTDOWN NO 
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No 


ALL PRIVILEGES YeS 


%• 



Check All / Uncheck All 



<£" Add a new User 



• 9< Remove selected users 

( Revoke all active privileges from the users and delete them afterwards. ) 
□ Drop the databases that have the same names as the users. 



Note: phpMyAdmin gets the users' privileges directly from MySQL's privilege tables. 
a The content of these tables may differ from the privileges the server uses, if they have 
™ been changed manually. In this case, you should reload the privileges before you 

continue. 
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Edit Create PHP Code 
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3. Edit the root user. 



DropBooK 



Chances are good that you have only one user, called root, and the 
pword field says No. You'll be adding a password to the root user, 
icon at the right allows you to edit this record. (Hover your mouse 
over the small icon to see ToolTips if you can't find it.) The edit screen 
looks like Figure 1-7. 



4. Examine the awesome power of the root administrator. 

Even if you don't know what all these things are, root can clearly do lots of 

things, and you shouldn't let this power go unchecked. (Consult any 

James Bond movie for more information on what happens with unfettered 

power.) You're still going to let root do all these things, but you're going to Book VI 

set a password so that only you can be root on this system. Scroll down a Chapter 1 

bit on the page until you see the segment that looks like Figure 1-8. 

5. Assign a password. g 

Simply click the box that says Password and then type the password in 
this box and the next one. Be sure that you type the same password 
twice. Follow all your typical password rules (six or more characters ST a. 



V) 



long, no spaces, case-sensitive). 



CD 



3 localhost / localhost | phpMyAdmin 2.9.2 - Mozilla Firefox 



Figure 1-7: 

You can use 
this tool to 
modify the 
root user's 
permissions. 
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(Databases) 



Please select a 
database 




Server: localhost 

&i Databases ^jSQL ^Status 1 Variables [jflCharsets ^Engines ^Privileges 
'■^Processes ^fxport ^Import 

V User ' root @' localhost' : Edit Privileges 

Global privileges ( Check All / Uncheck All ) 

Note: MySQL privilege names are expressed in English 



o 



rData 

0 SELECT 
0 INSERT 
0 UPDATE 
0 DELETE 
0 FILE 



[-Structure 

0 CREATE 

0 ALTER 

0 INDEX 

_ :?-ce 

>j treats tempcrar! 

0 create view 

0 show view 

0 create routine 

0 alte r rc'jti'te 

0 EXECUTE 



Administration 

0 CRANT 
0 SUPER 

0 PROCESS 
0 RELOAD 

0 s:-:-jtdc:^: 

0 show data3ases 

0 lock ta3les 

0 references 

0 replication client 

0 replication slave 

0 create user 



-Resource limits 

Note: Setting these options to 0 (zero) removes the limit. 

I© 1 error /0 warnings Q & 0 
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Figure 1-8: 

This area is 
where you 
add the 
password. 




I (Databases) 



Please select a 
database 



r- Database-specific privileges 

Database Privileges Grant Table-specific privileges Action 




o 


No Password 




Password: 






Re-type: 







-Change Login Information / Copy User- 



Login Information- 



User name: use text field 
Host: I Local 



v root 



localhost 



1 



Now: Clear, 30° F Toe: 37- F ^ Wed: 35° F ajjjfrfr 



6. Hit the Go button. 

If all went well, the password changes. 

7. Recoil in horror. 

Try to go back to the phpMyAdmin home (with the little house icon), 
and something awful happens, as shown in Figure 1-9. 

Don't panic about the error in Figure 1-9. Believe it or not, this error is good. 
Up to now, phpMyAdmin was logging into your database as root without a 
password Gust like the baddies were going to do). Now, phpMyAdmin is 
trying to do the same thing (log in as root without a password), but it can't 
because now root has a password. 

What you have to do is tell phpMyAdmin that you just locked the door and 
give it the key. (Well, the password, but I was enjoying my metaphor.) 

7. Find the phpMyAdmin configuration file. 

You have to let phpMyAdmin know that you've changed the password. 
Look for a file in your phpMyAdmin directory called conf ig . inc . php. 
(If you used the default XAMPP installation, the file is in c : \ Program 
Files\xampp\phpMyAdmin\conf ig . inc .php.) 
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DropBooks 



localhost / localhost | ph 



Bookmarks TooJs Help 



^ ffi I «*• http^'/localhost I iphpmyactm.ni 



IE 



0SSB 



(Databases) 



3 



Please select a 
database 



Figure 1-9: 

That mes- 
sage can't 
be good. 
Maybe I 
should 
have left it 
vulnerable. 



Welcome to phpMyAdmin 2.9.2 



phpMyAdmin tried to connect to the MySQL server, and the server rejected 
the connection. You should check the host, username and password in 
config.inc.php and make sure that they correspond to the information given 
by the administrator of the MySQL server. 



Error 



MySQL said: I 



- Open new phpMyAdmin window 



http^ocalhost/ptirOTyadmn^ 



warnings Q -Qi 0 Now: Clear, 30 C F 
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2. Find the root password setting. 

Using the text editor's search function. I found it on line 70, but it may be 
someplace else in your editor. In Notepad++, it looks like Figure 1-10. 

3. Change the root setting to reflect your password. 

Enter your root password. For example, if your new password is 
myPassword, change the line so that it looks like 

$cfg[ 1 Servers 1 ] [$i] [ 'password 1 ] = 'myPassword'; // MySQL password 

Of course, myPassword is just an example. It's really a bad password. 
Put your actual password in its place. 

It. Save the conf ig. inc .php file. 

Save the configuration file and return to phpMyAdmin. 

5. Try getting into phpMyAdmin again. 

This time, you don't get the error, and nobody is able to get into your 
database without your password. You shouldn't have to worry about 
this issue again, but whenever you connect to this database, you do 
need to supply the username and password. 
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Figure 1-10: 

Here's the 
username 
and con- 
figuration 
information. 
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II features (pmadb) 






Scfg [ ' Servers 1 ] [Si] [ 1 auth_type' ] 


= ' config ' ; // Authentication method (config, http or 




cookie based)? 






69 


$cfg [' Servers * ] [$i] ['user'] 


= 'root*; // MySQL user 




7 0 


Scfg [ ' Servers ' ] [$i] t 'password' ] 


= ' ' ; // MySQL password ( 


snly needed 


71 




// with 'config' auth_type) 


72 


Scfg ['Servers'] [Si] ['only_db'] 


= ' ' ; //If set to a db-name, only 


73 




// this db is displayec 


in left frame 


74 




// It may also be an array of db-names. 




where sorting order is relevant. 








$cf g [ ' Servers ' ] [ Si ] E ' verbose ' ] 


= ' ' ; // Verbose name for this host - leave 




blank to show the hostname 






76 
77 


$cfg[ ' Servers ' ] [$i] ['pmadb'] 


= ' phpmyadmin ' ; // Database used for 




Relation. Bookmark and PDF Features 






78 




// (see scripts/create_tablcs.sql) 


79 




// - leave blank for 


o support 


80 




// DEFAULT: 'php 


nyadmin' 


81 


Scfg [ 'Servers' ] [$i] [ 'bookmarktable' ] 


= 'pma bookmark'; //Bookmarktable 


82 




// - leave blank for 


o bookmark support 


83 




// DEFAULT: 'pma 


_bookmark' 


84 


Scfg ['Servers'] [$i] ['relation'] 


= 'pma relation'; // table to describe the 




relation between links {see doc) 






85 




// - leave blank for 


o relation-links 




support 




h 


PHP Hypertext Pr 


processor file 


nb char : 33176 Ln : 70 Col : 41 Sel ! 0 Dos\WirtOO'.vS ANSI INS 



Adding a user 

Changing the root password is the absolute minimum security measure, but 
it's not the only one. You can add various virtual users to your system to 
protect it further. 

You're able to log into your own copy of MySQL (and phpMyAdmin) as root 
because you're the root owner. (If not, then refer to the preceding section.) 
It's your database, so you should be allowed to do anything with it. 

You probably don't want your programs logging in as root because that can 
allow malicious code to sneak into your system and do mischief. You're 
better off setting up a different user for each database and allowing that user 
access only to the tables within that database. 

I'm really not kidding about the danger here. A user with root access can get 
into your database and do anything, including creating more users or chang- 
ing the root password so that you can no longer get into your own database! 
You generally shouldn't write any PHP programs that use root. Instead, have 
a special user for that database. If the bad guys get in as anything but root, 
they can't blow up everything. 
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Fortunately, creating new users with phpMyAdmin isn't a difficult procedure: 



DropBooH^' 



into phpMyAdmin with root access. 



re running XAMPP on your own server, you'll automatically log in 
as root. 

2. Activate the Privileges tab to view user privileges. 

3. Add a new user using the Add a New User link on the Privileges page. 

4. Fill in user information on the new user page (see Figure 1-1 1). 

Be sure to add a username and password. Typically, you use 1 local - 

host ' as the host. Book VI 

5. Create a database, if it doesn't already exist. Chapter 1 

If you haven't already made a database for this project, you can do so n 
automatically with the Create Table Automatically radio button. g g 

6. Do not assign global privileges. 

o C/) 

Only the root user should have global privileges. You want this user to ST S 

have the ability to work only within a specific database. 2. 



Figure 1-11: 

Here's the 
newxfd 
user being 
created. 



3 localhost / localhost | phpMyAdmin 2.9.2 - Mozilla Firefox 
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IE 



(Databases) 



Please select a 
database 



S3 Server: localhost 

feiDatabases ,3SQL ^Status IVariables [jj|Charsets tMEngines ^Privileges 
'^Processes ^Txport gpjlmport 

■ Add a new User 



Login Information- 



User name: use text field 



Bll*ra 



Host: [use text field 



- localhost 



Password: Usetextfield 



Re-type: 



Generate I Generate 1 1 Copy I 
Password: 1 J 1 m 



Database for user 

0 None 

O Create database with same name and grant all privileges 
O Grant all privileges on wildcard name (username_%) 



Global privileges ( Check All / Uncheck All ) 

Note: MySQL privilege names are expressed in English 

Data 1 [- S tructure 1 r-Administration- 



- -p 



| 1 error /0 warnings O # Nov;: Clear. 30 : F Tue: 37°F ] Wed: 35° F tffr 
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7. Create the user by clicking the Go button. 



DropBooks 0 



You see a new screen like Figure 1-12 (you need to scroll down a bit to 
e this part of the page). 




8. Specify the user's database. 

Select the database in the drop-down list. This user (xf d) will have 
access only to tables in the xf d database. Note that you probably don't 
have many databases on your system when you start out. 

9. Apply most privileges. 

You generally want your programs to do nearly everything within their 
own database so that you can apply almost all privileges (for now, 
anyway). I typically select all privileges except grant, which allows the 
user to allow access to other users. Figure 1-13 shows the Privileges page. 

As you're starting out, your programs have access to one database and are 
able to do plenty with it. As your data gets more critical, you'll probably want 
to create more restrictive user accounts so that those programs that should 
only be reading your data don't have the ability to modify or delete records. 
This change makes it more difficult for the bad guys to mess up your day. 



Q localhost / localhost | phpMyAdmin 2.9.2 - Mozilla Firefox 
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(Databases) 



Please select a 
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Figure 1-12: 

You can 
specify a 
specific 
database for 
this user. 



□ CREATE ROUTINE 

□ Ju-TER ROUTINE 

□ EXECUTE 



□ REFERENCES 

O REPLICATION CLIENT 

□ REFUTATION SLAVE 

□ CREATE USER 



Resource limits- 



Note: Setting these options to 0 (zero) removes the limit. 



MAX QUERIES PER HOUR 0 
MAX UPDATES PER HOUR 0 



MAX CONNECTIONS PER HOUR |0 
MAX USER_CONNECTIONS VQ 




Use text field: 
information\_schema 
cdcol 
cms 
hero 
mysql 
nuke 

phpmyadmin 

j-Database-specific privileges spy 

Database Privileges Grant Table-s v/e bauth 
None xfd 



33 



Add privileges on the following database: ; Use text field 



Change password- 
O No Password 



( 1 error /0 warnings G 0 No'a: Clear, 30°F 



::37°F ^ Wed:3S'F • > 
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localhost / localhost | phpMyAdmin 2.9.2 - Mozill 
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Bookmarks Tools Help 



•vf 1 4 httpi/yiocaihost/phpmyadmin/ 



HUE EE 



0SHH 



(Databases) 



Please select a 
database 



Figure 1-13: 

The xfd user 
can do 
everything 
but grant 
other 
privileges 
on this 
database. 



gi Server: localhost 

^Databases JjSQL ^Status 1 Variables [<I|Charsets ^Engines ^Privileges 
^Processes ^Export ^Import 

1- User ' xfd' @' localhost' - Database xfd : Edit Privileges 

u| r Database-specific privileges ( Check All / Uncheck All ) 



Note: MySQL privilege r, 



s expressed in English 



Data 

0 SELECT 

0 INSERT 

0 UPDATE 

0 DELETE 



CREATE 
ALTER 
INDEX 
DROF 

CREATE TEMPORARY 1 
CREATE VIEW 
SHOW VIEW 
CREATE ROUT IKE 
ALTER ROUTINE 
EXECUTE 



Administration 

O GRANT 

0 LOCK TA3LES 

0 REFERENCES 
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Your database users won't usually be people. This idea is hard, particularly 
if you haven't used PHP or another server-side language yet. The database 
users are usually programs you have written that access the database in 
your name. 



Usinq phphAyAdmin on a remote server 

If you're working on some remote system with your service provider, the 
mechanism for managing and creating your databases may be a bit different. 
Each host has its own quirks, but they're all pretty similar. As an example, 
here's how I connect to the system on Free Hostia at http : / / f reehostia . 
com (where I post the example pages for this book): 

/. Log onto your service provider using the server login. 

You usually see some sort of control panel with the various tools you 
have as an administrator. These tools often look like Figure 1-14. 

2. Locate your database settings. 

Not all free hosting services provide database access, but some (like Free 
Hostia — at least, as of this writing) do have free MySQL access. You usu- 
ally can access some sort of tool for managing your databases. (You'll 
probably have a limited number of databases available on free servers, 
but more with commercial accounts.) Figure 1-15 shows the database 
administration tool in Free Hostia. 
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Figure 1-14: 

The Free 
Hostia site 
shows a 
number of 
useful 
admini- 
stration 
tools. 
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File Manager FrontPage Extensions MySQL Databases 



Password Protected 
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PHP Settings 
E-mail Options 
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E-mail Manager E-mail Fill 



Anti-spam Protection SPF Protection E-mail Forwarding 



Webmail 



Mailing Lists 
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Figure 1-15: 

The data- 
base admini- 
stration tool 
lets me 
create 
or edit 
databases. 
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Willi : - Quick Controls 
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Video Tutcnals * ^ Shcft.-'Hide Help *> 



"J ■ndher50_XT t t) 
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3. Create a database according to the rules enforced by your system. 



DropBooKi 



Sometimes, you can create the database within phpMyAdmin (as I did in 
'ast section), but more often, you need to use a special tool like the 
shown in Figure 1-15 to create your databases. Free Hostia imposes 
a couple of limits: The database name begins with the system username, 
and it can't be more than 16 characters long. 





Don't freak out if your screen looks a little different than Figure 1-15. 
Different hosting companies have slightly different rules and systems, so 
things won't be just like this, but they'll probably be similar. If you get 
stuck, be sure to look at the hosting service's Help system. You can also 
contact the support system. They're usually glad to help, but they're 
(understandably) much more helpful if you've paid for the hosting serv- 
ice. Even the free hosting systems offer some online support, but if 
you're going to be serious, paying for online support is a good deal. 

4. Create a password for this database. 

You probably need a password (and sometimes another username) for 
your databases to prevent unauthorized access to your data. Because 
the database is a different server than the Web server, it has its own 
security system. On Free Hostia, I must enter a password, and the 
system automatically creates a MySQL username with the same name as 
the database. Keep track of this information because you need it later 
when you write a program to work with this data. 

5. Use phpMyAdmin to add tables to your database. 

Once you've defined the database, you can usually use phpMyAdmin to 
manipulate the data. With Free Hostia, you can simply click a database 
name to log into phpMyAdmin as the administrator of that database. 
Figure 1-16 shows the new database in phpMyAdmin, ready for action. 

Typically a remote server doesn't give you root access, so you don't have to 
mess around with the whole root password mess described in the "Changing 
the root password" section of this chapter. Instead, you often have either 
one password you always use in phpMyAdmin, or you have a different user 
and password for each database. 
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Making a Database With phpMyAdmin 

When you've got a database, you can build a table. When you've defined a 
table, you can add data. When you've got data, you can look at it. Begin by 
building a table to handle the contact data described in the first section of 
this chapter, "Examining the Basic Structure of Data": 

/. Be sure you're logged into phpMyAdmin. 

The phpMyAdmin page should look something like Figure 1-17, with 
your database name available in the left column. 
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Figure 1-16: 

Now, I can 
edit the 
database 
in php- 
MyAdmin. 
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Password: 
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Figure 1-17: 

The main 
screen of 
the php- 
MyAdmin 
system. 
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andhar50_xfd 



Welcome to phpMyAdmin 2.6.4-pl2 

MySQL 4.1.11-Debian_4sarge7-log running on mysql4.freehostia.com as 
andhar50_xfd@hex1.freehostia.com 



phpMyAdmin 
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andhar5(Pxfd 



% Show processes © 
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q£i Export 

__ Log out 
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2. Activate the database by clicking the database name in the left column. 

If the database is empty, an Add Table page, shown in Figure 1-18, appears. 

te a new table using the phpMyAdmin tool. 

Now that you have a database, add the contacts table to it. The contacts 
database has four fields, so type a 4 into the box and let 'er rip. A form 
like Figure 1-19 appears. 

4. Enter the field information. 

Type the field names into the grid to create the table. It should look like 
Figure 1-20. 

In Figure 1-20, you can't see it, but a radio button appears to the far right 
that you can use to set the contactID as a primary key Be sure to add 
this indicator. 

5. Click the Save button and watch the results. 

phpMyAdmin automatically writes some SQL code for you and executes 
it. Figure 1-21 shows the code and the new table. 

Now, the left panel indicates that you're in the xf d database, which has 
a table called contact. 
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Figure 1-18: 

Type a table 
name to 
begin adding 
a table. 
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Figure 1-19: 

Creating the 

contacts 

table. 
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Figure 1-20: 

Enter field 
data on this 
form. 
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Figure 1-21: 

php- 

MyAdmin 
created this 
mysterious 
code and 
built a table. 
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After you define a table, you can add data. Click contact in the left column, and 
you see the screen for managing the contact table, as shown in Figure 1-22. 

You can add data with the Insert tab, which gives a form like Figure 1-23, 
based on your table design. 

After you add the record, choose Insert Another Row and click the Go button. 
Repeat until you've added all the contacts you want in your database. 

After you add all the records you want to the database, you can use the 
Browse tab to see all the data in the table. Figure 1-24 shows my table after I 
added all my contacts to it and browsed. 
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Figure 1-23: 

Adding a 
record to 
the table. 
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Figure 1-24: 

Viewing the 
table data 
in phpMy- 
Admin. 
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In This Chapter 

Working with SQL script files 
e* Using auto_INCREMENT to build primary key values 

V Selecting a subset of fields 

v 0 Displaying a subset of records 
v* Modifying your data 
Deleting records 

V Exporting your data 



J\ lthough we tend to think of the Internet as a series of interconnected 
¥ w documents, the Web is increasingly about data. The HTML and XHTML 
languages are still used to manage Web documents, but the SQL (Structured 
Query Language) — the language of data — is becoming increasingly central. 
In this chapter, you discover how SQL is used to define a data structure, add 
data to a database, and modify that data. 



Writing SQL Code by Hand 

Although you can use phpMy Admin to build databases, all it really does is 
write and execute SQL code for you. You should know how to write SQL 
code yourself for many reasons: 



♦ It's pretty easy. SQL isn't terribly difficult (at least, to begin with — 
things do get involved later). The basics are actually probably easier to 
code yourself than to create them using phpMyAdmin. 

♦ You need to write code in your programs. You probably run your data- 
base from within PHP programs. You need to be able to write SQL com- 
mands from within your PHP code, and phpMyAdmin doesn't help much 
with that job. 

♦ You can't trust computers. You should understand any code that has 
your name on it, even if you use a tool like phpMyAdmin to write it. If 
your program breaks, you have to fix it eventually, so you really should 
know how it works. 



Writing SQL Code by Hand 



♦ SQL scripts are portable. Moving an entire data structure to a new 
server is difficult, but if you have a script that creates and populates 
4fee database, that script is just an ASCII file. You can easily move a 
^)mplete database (including the data) to a new machine. 

♦ SQL scripts allow you to quickly rebuild a corrupted database. As 

you're testing your system, you'll commonly make mistakes that can 
harm your data structure. It's very nice to have a script that you can use 
to quickly reset your data to some standard test state. 

Understanding SQL syntax rules 

SQL is a language (like XHTML, JavaScript, CSS, and PHP), so it has its own 
syntax rules. The rules and traditions of SQL are a bit unique because this lan- 
guage has a different purpose than more traditional programming languages: 

♦ Keywords are in uppercase. Officially, SQL is not case-sensitive, but 
the tradition is to make all reserved words in uppercase and the names 
of all your custom elements camel-case. Some variations of SQL are 
case-sensitive, so you're safest assuming that they all are. 

♦ One statement can take up more than one line in the editor. SQL 

statements aren't usually difficult, but they can get long. Having one 
statement take up many lines in the editor is common. 

♦ Logical lines end in semicolons. Like PHP and JavaScript, each statement 
in SQL ends in a semicolon. 

♦ White space is ignored. DBMS systems don't pay attention to spaces 
and carriage returns, so you can (and should) use these tools to help 
you clarify your code meaning. 

♦ Single quotes are used for text values. MySQL usually uses single 
quotes to denote text values, rather than the double quotes used in 
other languages. If you really want to enclose a single quote in your text, 
backslash it. 

Examining the buitdContact.sqt script 

Take a look at the following code: 

-- buildContact . sql 

DROP TABLE IF EXISTS contact; 

CREATE TABLE contact ( 

contactID int PRIMARY KEY, 
name VARCHAR(50) , 
company VARCHAR(30) , 
email VARCHAR(50) 

); 
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INSERT INTO contact VALUES 

(0, 'Bill Gates', 'Microsoft', ' bill&msBob . com' ) ; 
INTO contact VALUES 

S^eve Jobs', 'Apple', 'steve@rememberNewton.com'); 
^fTO contact VALUES 

I^nus Torvalds ' , ' Linux Foundation ' , ' linus@gnuWho . org ' ) ; 
INSERT INTO contact VALUES 

(3, 'Andy Harris', 'Wiley Press', 'andy@aharrisBooks.net'); 

SELECT * FROM contact; 

This powerful code is written in SQL. I explain each segment in more detail 
throughout the section, but here's an overview: 

/. Delete the contact table, if it already exists. 

This script completely rebuilds the contact table, so if it already exists, 
it is temporarily deleted to avoid duplication. 

2. Create a new table named contact. 

As you can see, the table creation syntax is spare but pretty straight- 
forward. Each field name is followed by its type and length (at least, in 
the case of VARCHARs). 

3. Add values to the table by using the insert command. 

Use a new insert statement for each record. 

4. View the table data using the select command. 

This command displays the content of the table. 

dropping a table 

It may seem odd to begin creating a table by deleting it, but there's actually a 
good reason. As you experiment with a data structure, you'll often find your- 
self building and rebuilding the tables. 

The line 

DROP TABLE IF EXISTS contact 

means "look at the current database and see whether the table contact 
appears in it. If so, delete it." This syntax ensures that you start over fresh, 
as you are rebuilding the table in the succeeding lines. Typical SQL scripts 
begin by deleting any tables that will be over-written to avoid confusion. 

Creating a table 

You create a table with the (aptly named) create table command. The 
specific table creation statement for the contact table looks like 
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CREATE TABLE contact ( 

contactID int PRIMARY KEY, 
name VARCHAR(50) , 

ny VARCHAR(30) , 
VARCHAR ( 50 ) 



Creating a table involves several smaller tasks: 

/. Specify the table name. 

The create table statement requires a table name. Specify the table 
name. Table names (like variables and filenames) should generally not 
contain spaces or punctuation without good reason. 

2. Begin the field definition with a parenthesis. 

The left parenthesis indicates the beginning of the field list. You tradi- 
tionally list one field per line, indented as in regular code, although that 
format isn't required. 

3. Begin each field with its name. 

Every field has a name and a type. Begin with the field name, which 
should also be one word. 

4. Indicate the field type. 

The field type immediately follows the field name (with no punctuation). 

5. Indicate field length, if necessary. 

If the field is a VARCHAR or CHAR field, specify its length in parentheses. 
You can specify the length of numeric types, but I don't recommend it 
because MySQL automatically determines the length of numeric fields. 

6. Add special modifiers. 

Some fields have special modifiers. For now, note that the primary key is 
indicated on the contactID field. 

7. End the field definition with a comma. 

The comma character indicates the end of a field definition. 

8. End the table definition with a closing parenthesis and a semicolon. 

Close the parenthesis that started the table definition and end the entire 
statement with a semicolon. 



Adding records to the tabie 

You add data to the table with the insert command. The way this com- 
mand works isn't too surprising: 

INSERT INTO contact VALUES 

(0, 'Bill Gates', 'Microsoft', 'bill@msBob.com'); 
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Follow these steps: 
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with the insert keyword. 

NSERT to clarify that this instruction is a data insertion command. 

2. Specify the table you want to add data to. 

In my example, I have only one table, so use into contact to specify 
that that's where the table goes. 

3. (Optional) Specify field names. 

You can specify a list of field names, but this step is unnecessary if you 
add data to all fields in their standard order. (Normally, you don't bother 
with field names.) 

4. Use the values keyword to indicate that a list of field values is 
coming. 

5. Enclose the values in parentheses. 

Use parentheses to enclose the list of data values. 

6. Put all values in the right order. 

Place values in exactly the same order the fields were designated. 

7. Place text values in single quotes. 

MySQL uses single quotes to specify text values. 

8. End the statement with a semicolon, as you do with all SQL com- 
mands. 

9. Repeat with other data. 

Add as many insert commands as you want to populate the data table. 



Viewing the sample data 



Once you've created and populated a table, you'll want to look it over. SQL 
provides the select command for this purpose, select is amazingly pow- 
erful, but its basic form is simplicity itself: 

SELECT * FROM contact; 

This command simply returns all fields of all records from your database. 
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Running a Script With phpMyAdmin 

phpMyAdmin provides terrific features for working with SQL scripts. You can 
write your script directly in phpMyAdmin, or you can use any text editor. 
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x ^v.sr^ Aptana Studio is fine for editing SQL files, but it doesn't have built-in SQL 
.-j^ Y^fX ^support, such as syntax checking and coloring. You can download a plugin 
these features (search for eclipse SQL plugins); use another editor 
tepad++, which does have syntax coloring for SQL; or just do without 
syntax coloring in Aptana (which is what I do). 

If you've written a script in some other editor, you'll need to save it as a text 
file and import it into phpMyAdmin. 




To run a script in phpMyAdmin 

/. Connect to phpMyAdmin. 

Be sure that you're logged in and connected to the system. 

2. Navigate to the correct database. 

Typically, you use a drop-down list to the left of the main screen to pick 
the database. (If you haven't created a database, see the instructions in 
Chapter 1 of this minibook.) Figure 2-1 shows the main phpMyAdmin 
screen with the xf d database enabled. 



Figure 2-1: 

The xfd 
database is 
created and 
ready to go. 




/ locathost / xfd | phpMyAdmin 2.9.2 - Mozilla Firefox 



xfd (1) 

lj contact 



Bookmarks Tods Help 

ijvf | BUJ 'io:s ,k o;t , oh>iwadrfiirv 



Server: localhost ► ^ Database: xfd 
EfStructure ^SQL y Search ^Query ^Export ^Import ^Operations ^Privileges 
y Drop 





Table 




Action 


Records 


Type 


Collation 




Size 


Overhead 


□ 


contact 


= £ 


2 »i 1 X 




MylSAM 


latinl_general_ci 




2-2 






1 table(s) 




Sum 




MylSAM 


latin l_swedish_ 


i 


2. a. 

KiB 


o a 



Check All / Uncheck All 



With selected: v 



h Print view Data Dictionary 
tJ Create new table on database xfd 
Name: 



Number of fields: 



- Open new phpMyAdmin window 
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3. Activate the SQL pop-up window. 

You can do so by clicking the small SQL icon in the left-hand navigation 
u. The resulting window looks like Figure 2-2. 



Figure 2-2: 
The SQL 

script 
window. 
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if. (Optional) Type your SQL code directly into this dialog box. 

This shortcut is good for making quick queries about your data, but 
generally, you create and initialize data with prewritten scripts. 

5. Move to the Import Files tab. 

In this tab, you can upload the file directly into the MySQL server. 
Figure 2-3 shows the resulting page. Use the Browse button to locate 
your file and the Go button to load it into MySQL. 
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01 



Figure 2-3: 

Importing an 
externally 
defined SQL 
script. 
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Character set of the file: utfS ^ | Go | j 
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If you've already created the contact database by following the instruc- 
tions in Chapter 1 of this minibook, you may be nervous that you'll over- 
write the data. You will, but for this stage in the process, that's exactly 
what you want. The point of a script is to help you build a database and 
rebuild it quickly. After you've got meaningful data in the table, you 
won't be rebuilding it so often, but during the test and creation stage, it's 
a critical skill. 
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6. Examine your handiwork. 

Look back at the phpMy Admin page, and you see something like Figure 
V£4. It shows your script and, if you ended with a select statement, an 
Tlutput of your table. 
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Figure 2-4: 

Here's the 
script and 
its results, 
shown in 
phpMy- 
Admin. 
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NULL , 'Linus Torvalds', 'Linux Foundation', 'linus@gnuWho.org' 
); # Affected rows: 1 
INSERT INTO contact 
VALUES : 

NULL , 'Andy Harris', 'Wiley Press', 'andy@aharrisBooks.net' 
); # Affected rows: 1 
SELECT 
FROM contact: 
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Usina AUWJNCREMENT for Primary Keys 

Primary keys are important because you use them as a standard index for 
the table. The job of a primary key is to uniquely identify each record in the 
table. Remember that primary keys have a few important characteristics: 



♦ It must exist. Every record must have a primary key. 

♦ It must be unique. Two records in the same table can't have the same key. 

♦ It should not be null. There must be a value in each key. 

When you initially create a table, you have all the values in front of you, but 
what if you want to add a field later? Somehow, you have to ensure that the 
primary key in every record is unique. 
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Over the years, database developers have discovered that integer values are 
ecially handy as primary keys. The great thing about integers is that you 
ys find a unique one. Just look for the largest index in your table 
ne. 



Fortunately, MySQL (like most database packages) has a wonderful feature 
for automatically generating unique integer indices. 



Take a look at this variation of the buildContact . sql script: 

-- buildContactAutoIncrement . sql 

DROP TABLE IF EXISTS contact; 

CREATE TABLE contact ( 

contactID int PRIMARY KEY AUTOJNCREMENT, 
name VARCHAR(50) , 
company VARCHAR(30) , 
email VARCHAR(50) 
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INSERT INTO contact VALUES 

(null, 'Bill Gates', 'Microsoft', 'bill@msBob.com'); 
INSERT INTO contact VALUES 

(null, 'Steve Jobs', 'Apple', 'steve@rememberNewton.com'); 
INSERT INTO contact VALUES 

(null, 'Linus Torvalds ' , 'Linux Foundation', 'linus@gnuWho.org'); 
INSERT INTO contact VALUES 

(null, 'Andy Harris', 'Wiley Press', 'andy@aharrisBooks.net'); 

SELECT * FROM contact; 



si 

01 



Here are the changes in this script: 

♦ Add the auto_increment tag to the primary key definition. This tag 
indicates that the MySQL system will automatically generate a unique 
integer for this field. You can apply the auto_increment tag to any 
field, but you most commonly apply it to primary keys. 

♦ Replace index values with null. When you define a table with 
auto_increment, you should no longer specify values in the affected 
field. Instead, just place the value null. When the SQL interpreter sees 
the value null on an auto_increment field, it automatically finds the 
next largest integer. 




You may wonder why I'm entering the value null when I said primary keys 
should never be null. Well, I'm not really making them null. The null value is 
simply a signal to the interpreter: "Hey, this field is auto_increment, and I 
want you to find a value for it." 
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p"npivl7T^dftiiifi?^/vonderful tool, but it does have 
one strange quirk. When you look over yourtable 
design, you may find that the collation is set 
to latinl_swedish_ci. This syntax refers 
to the native character set used by the internal 
data structure. Nothing is terribly harmful about 
this set (Swedish is a wonderful language), but I 
don't want to incorrectly imply that my database 
is written in Swedish. 

Fortunately, it's an easy fix. In phpMyAdmin, go 
to the Operationstab and lookforTable Options. 



You can then set your collation to whatever you 
want. I typically use latinl_general_ci 
as it works fine for American English, which is 
the language used in most of my data sets. (See 
the MySQL documentation about international- 
ization if you're working in a language that needs 
the collation feature.) 

I've only run into this problem with phpMyAdmin. 
If you create your database directly from the 
MySQL interpreter orfrom within PHP programs, 
the collation issue doesn't seem to be a problem. 



Selecting Data from l/our Tables 

Creating a database is great, but the real point of a database is to extract 
information from it. SQL provides an incredibly powerful command for 
retrieving data from the database. The basic form looks like 

SELECT * FROM contact; 

The easiest way to practice SQL commands is to use phpMyAdmin. Figure 2-5 
shows phpMyAdmin with the SQL tab open. 

Note that you can enter SQL code in multiple places. If you're working with 
a particular table, you can invoke that table's SQL tab (as I do in Figure 2-5). 
You can also always enter SQL code into your system with the SQL button 
on the main phpMyAdmin panel (on the left panel of all phpMyAdmin 
screens). 

If you have a particular table currently active, the SQL dialog box shows 
you the fields of the current table, which can be handy when you write 
SQL queries. 

Try the select * from contact; code in the SQL dialog box, and you 
see the results shown in Figure 2-6. 
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easily test 
queries in 
phpMy- 
Admin. 



-Run SQL query/queries on database xfd: 



|xfd(1) 




•$"JLZZ ■ FROM 'ccitacf K'r.Z^ 1 



Fields 

contactID 

name 

company 

email 



Bookmark this SQL query: 



□ Let every user access this bookmark 

□ Replace existing bookmark of same name 



[ Delimiter 



0 Show this query here again 



~ Open new phpMyAdmin window 



■s / 2 warnings © £ Adblock 99 Now: Rain, 33* F 4 



Sun: 45= F Mon: 38° F 



Book VI 
Chapter 2 



01 

S3 



Ql 
01 



Figure 2-6: 
The 

standard 

SELECT 

statement 
returns the 
entire table. 
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Seiectinq only a feu/ fields 

|""N ["^ |As databases get more complex, you'll often find that you don't want every- 

J \ C] fj f| fj fj Sometimes, you only want to see a few fields at a time. You can replace 

trrer"xharacters with field names. For example, if you want to see only the 
names and e-mail addresses, use this variation of the select statement: 



SELECT name, email FROM contact; 

Only the columns you specify appear, as you can see in Figure 2-7. 

Here's another really nice trick you can do with fields. You can give each 
column a new virtual field name: 

SELECT 

name as ' Person 1 , 

email as 'Address 1 
FROM contact; 

This code also selects only two columns, but this time, it attaches the spe- 
cial labels Person and Address to the columns. You can see this result in 
Figure 2-8. 
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columns. 
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The capability to add a virtual name for each column doesn't seem like a big 
deal now, but it becomes handy when your database contains multiple 
tables. (For example, you may have a table named pe and another table 
named owner that both have a name field. The virtual title feature helps 
keep you (and your users) from being confused. 



Selecting a subset of records 

One of the most important jobs in data work is returning a smaller set of the 
database that meets some kind of criterion. For example, what if you want to 
dash off a quick e-mail to Steve Jobs? Use this query: 

SELECT * 
FROM contact 
WHERE 

name = ' Steve Jobs ' ; 

This query has a few key features: 

♦ It selects all fields. This query selects all the fields (for now). 

♦ A where clause appears. The where clause allows you to specify a 
condition. 
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It has a condition. SQL supports conditions, much like ordinary pro- 
gramming languages. MySQL returns only the records that match this 
ndition. 



e condition begins with a field name. SQL conditions usually com- 
pare a field to a value (or to another field). 

♦ Conditions use single equals signs. You can easily get confused on 
this detail because SQL uses the single equal sign (=) in conditions, 
where most programming languages use double equals (==) for the 
same purpose. 

♦ All text values must be in single quotes. I'm looking for an exact match 
on the text string ' Steve Jobs ' . 

4- It assumes that searches are case-sensitive. Different databases have 
different behavior when it comes to case-sensitivity in select state- 
ments, but you're safest assuming that case matters. 

Figure 2-9 shows the result of this query. 

SQL is pretty picky about the entire text string. The following query doesn't 
return any results in the contact database: 

SELECT * 
FROM contact 
WHERE 

name = ' Steve 1 ; 
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LIMIT 0 , 30: 
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The contact table doesn't have any records with a name field containing 
Steve (unless you added some records when I wasn't looking). Steve Jobs is 
ame as Steve, so this query returns no results. 



DropBooKs 

Searching With partial information 



Of course, sometimes all you have is partial information. Take a look at the 
following variation to see how it works: 



SELECT * 
FROM contact 
WHERE 

company LIKE ' L% 1 ; 

This query looks at the company field and returns any records with a com- 
pany field beginning with L. Figure 2-10 shows how it works. 

The like clause is pretty straightforward: 

♦ The keyword like indicates a partial match is coming. It's still the 
select statement, but now it has the like keyword to indicate an 
exact match isn't necessary. 

♦ The search text is still in single quotes, just like the ordinary select 
statement. 

♦ The percent sign (%) indicates a wildcard value. A search string of 
' w% ' looks for W followed by any number of characters. 

♦ Any text followed by % indicates that you're searching the beginning 
of the field. So, if you're looking for people named Steve, you can write 

SELECT * FROM contact WHERE name LIKE ' Steve% ' ; . 
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Searching for the ending i/atue of a field 

Likewise, you can find fields that end with a particular value. Say that you 
want to send an e-mail to everyone in your contact book with a . com 
address. This query does the trick: 



SELECT * 
FROM contact 
WHERE 

email LIKE '%.com'; 



Figure 2-11 shows the results of this query. 
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Searching for any text in a field 

Oie more variant of the like clause allows you to find a phrase anywhere 
J |fj fj fj fjjiweSield. Say that you remember somebody in your database writes 

P"^ ^^ooKs'^cind you decide to search for e-mail addresses containing the phrase 

book: 

SELECT * 
FROM contact 
WHERE 

email LIKE ' %book% 1 ; 

The search phrase has percent signs at the beginning and the end, so if the 
phrase book occurs anywhere in the specified field, you get a match. And 
what do you know? Figure 2-12 shows this query matches on the record of a 
humble yet lovable author! 



Figure 2-12: 

This query 
searched 
for the 
phrase 
'book' 

anywhere in 
the e-mail 
string. 
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Searching With regular expressions 

know how to use regular expressions, you know how great they can be 
ou need a more involved search. MySQL has a special form of the 
T keyword that supports regular expressions: 



SELECT * 
FROM contact 
WHERE 

company REGEXP 



{5}$' ; 




The regexp keyword lets you search using powerful regular expressions. 
(Refer to Book IV, Chapter 6 for more information on regular expressions.) 
This particular expression checks for a company field with exactly five let- 
ters. In this table, it returns only one value, shown in Figure 2-13. 

Unfortunately, not all database programs support the regexp feature, but 
MySQL does, and it's really powerful if you understand the (admittedly 
arcane) syntax of regular expressions. 



Figure 2-13: 

Regular 
expressions 
are even 
more 
powerful 
than the 
standard 
LIKE clause. 
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Sorting your responses 

|""N _yc|i can specify the order of your query results with the order by clause. It 
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SELECT * 
FROM contact 
ORDER BY email; 

The order by directive allows you to specify a field to sort by. In this case, I 
want the records displayed in alphabetical order by e-mail address. Figure 
2-14 shows how it looks. 

By default, records are sorted in ascending order. Numeric fields are sorted chanter2 

from smallest to largest, and text fields are sorted in standard alphabetic 

order. 

3 

0) 

Well, not quite standard alphabetic order . . . SQL isn't as smart as a librar- S = 

ian, who has special rules about skipping "the" and so on. SQL simply looks 

at the ASCII values of the characters for sorting purposes. q" 3 



You can also invert the order: 

SELECT * 

FROM contact 

ORDER BY email DESC; 



si 

01 



Figure 2-14: 

Now, the 
result is 
sorted by 
e-mail 
address. 
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-SQL query: 










SELECT 
FROM contact 
ORDER BY email 
LIMIT 0 , 30; 
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Inverting the order causes the records to be produced in reverse alphabetic 
order by e-mail address, desc stands for descending order. ASC stands for 
lasca^ding order, but because it's the default, it isn't usually specified. 



Of course, the purpose of a database is to manage data. Sometimes, you 
want to edit data after it's already in the table. SQL includes handy com- 
mands for this task: update and delete. The update command modifies 
the value of an existing record, and the delete command removes a record 
altogether. 



Say that you decide to modify Bill Gates' address to reinforce his latest mar- 
keting triumph. The following SQL code does the trick: 

UPDATE contact 

SET email = 'bill@vistaRocks.com' 
WHERE name = 'Bill Gates'; 

The update command has a few parts: 

♦ The update command. This indicates which table you will modify. 

♦ The SET command. This indicates a new assignment. 

♦ Assign a new value to a Held. This uses a standard programming-style 
assignment statement to attach a new value to the indicated field. You 
can modify more than one field at a time. Just separate the field = 
value pairs with commas. 

♦ Specify a where clause. You don't want this change to happen to all the 
records in your database. You want to change only the e-mail address in 
records where the name is Bill Gates. Use the where clause to specify 
which records you intend to update. 

More than one person in your database may be named Bill Gates. Names 
aren't guaranteed to be unique, so they aren't really the best search criteria. 
This situation is actually a very good reason to use primary keys. A better 
version of this update looks like 

UPDATE contact 

SET email = 'bill@vistaRocks.com' 
WHERE contactID = 1; 

The contactID is guaranteed to be unique and present, so it makes an ideal 
search criterion. Whenever possible, update (and drop) commands should 
use primary key searches so that you don't accidentally change or delete the 
wrong record. 
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Deleting a record 

Scfnetimes, you need to delete records. SQL has a command for this eventu- 
it's pretty easy to use: 



DELETE FROM contact 
WHERE contactID = 1; 



This command deletes the entire record with a contactID of 1. 




Be very careful with this command, as it is destructive. Be absolutely sure that 
you have a where clause, or you may delete all the records in your table with 
one quick command! Likewise, be sure that you understand the where clause 
so that you aren't surprised by what gets deleted. You're better off running an 
ordinary select using the where clause before you delete, just to be sure 
that you know exactly what you're deleting. Generally, you should delete 
based on only a primary key so that you don't produce any collateral damage. 



Exporting \lour Data and Structure 

After you've built a wonderful data structure, you probably will want to 
export it for a number of reasons: 

♦ You want a backup. Just in case something goes wrong! 

♦ You want to move to a production server. It's smart to work on a local 
(offline) server while you figure things out, but eventually, you'll need to 
move to a live server. Moving the actual database files is tricky, but you 
can easily move a script. 

♦ You want to perform data analysis. You may want to put your data in a 
spreadsheet for further analysis or in a comma-separated text file to be 
read by programs without SQL access. 

♦ You want to document the table structure. The structure of a data set is 
extremely important when you start writing programs using that struc- 
ture. Having the table structure available in a word-processing or PDF 
format can be extremely useful. 

MySQL (and thus phpMyAdmin) have some really nice tools for exporting 
your data in a number of formats. 

Figure 2-15 shows an overview of the Export tab, showing some of the features. 
The different styles of output are used for different purposes: 

♦ CSV (comma-separated value) format: A plain ASCII comma-separated 
format. Each record is stored on its own line, and each field is separated 
by a comma. CSV is nice because it's universal. Most spreadsheet 



Book VI 
Chapter 2 




678 Exporting \lour Data and Structure 



gram to 
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programs can read CSV data natively, and it's very easy to write a pro- 
gram to read CSV data, even if your server doesn't support MySQL. If 
u want to back up your data to move to another server, CSV is a good 
Figure 2-16 shows some of the options for creating a CSV file. 




The data file created using the specified options looks like 

' contactID 1 , 1 name ' , ' company 1 , 1 email ' 

1 1 1 , 1 Bill Gates ' , 'Microsoft 1 , 1 bill@msBob. com 1 

1 2 1 , 1 Steve Jobs 1 , ' Apple 1 , 1 steve@rememberNewton . com ' 

'3 ', 'Linus Torvalds ' ( ' Linux Foundation' , 1 linus@gnuWho.org' 

'4', 'Andy Harris', 'Wiley Press 1 , 'andy@aharrisBooks.net' 

The CSV format often uses commas and single quotes, so if these char- 
acters appear in your data, you may encounter problems. Be sure to test 
your data and use some of the other delimiters if you have problems. 

♦ MS Excel and Open Document Spreadsheet: These are the two currently 
supported spreadsheet formats. Exporting your data using one of these 
formats gives you a spreadsheet file that you can easily manipulate, which 
is handy when you want to do charts or data analysis based on your data. 
Figure 2-17 shows an Excel document featuring the contact table. 

♦ Word-processing formats: Several are available to create documentation 
for your project. Figure 2-18 shows a document created with this feature. 
Typically, you use these formats to describe your format of the data and 
the current contents. LaTeX and PDF are special formats used for printing. 
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Figure 2-17: 

This Excel 
spreadsheet 
was auto- 
matically 
created. 
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Figure 2-18: 

Word- 
processing, 
PDF, and 
LaTeX for- 
mats are 
great for 
documen- 
tation. 
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Table structure for table contact 



Field iType 


Null 


Default 


contactID int(ll) 


Yes 


NULL 


name 


varchar(50) 


Yes 


NULL 


company 


varchar(30) 


Yes 


NULL 


email 


varchar(50) 


Yes 


NULL 



Dumping data for table contact 



1 Bill Gates Microsoft [bill@msBob.com 

2 Steve Jobs Apple steve@rememberNewton.com 



3 Linus Torvalds Linux Foundation linus@ gnuWbo.org 

4 Andy Hams Wiley Press 'andy@ahamsBooks.net 



Exporting SQL code 

One of the neatest tricks is to have phpMyAdmin build an entire SQL script 
for re-creating your database. Figure 2-19 shows the available options. 

The resulting code looks like 

-- phpMyAdmin SQL Dump 

-- version 2.9.2 

-- http://www.phpmyadmin.net 

-- Host: localhost 

-- Generation Time: Dec 08, 2007 at 12:15 PM 
-- Server version: 5.0.33 
-- PHP Version: 5.2.1 

-- Database: 'xfd' 



— Table structure for table "contact" 



CREATE TABLE "contact" ( 

"contactID" int(ll) NOT NULL auto_increment, 
"name" varchar(50) collate latinl_general_ci default NULL, 
"company" varchar(30) collate latinl_general_ci default NULL, 
"email" varchar(50) collate latinl_general_ci default NULL, 
PRIMARY KEY ("contactID") 
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) ENGINE=MyISAM DEFAULT CHARSET=latinl COLLATE=latinl_general_ci 
AUTO_INCREMENT= 5 ; 



DropBooks 



data for table 'contact' 



INSERT INTO 'contact' VALUES (1, 
INSERT INTO 'contact' VALUES (2, 

1 steve@rememberNewton.com' ) ; 
INSERT INTO 'contact' VALUES (3, 
INSERT INTO 'contact' VALUES (4, 

1 andy@aharrisBooks .net 1 ) ; 



Bill Gates ' , 
Steve Jobs ' , 



'Microsoft ' 
'Apple ' , 



'bill@msBob.com' ) ; 



Linus Torvalds 1 , ' W3C ' , ' linus@gnuWho . org ' ) ; 
Andy Harris', 'Wiley Press', 



You can see that phpMyAdmin made a pretty decent script that you can use 
to re-create this database. You can easily use this script to rebuild the data- 
base if it gets corrupted or to copy the data structure to a different imple- 
mentation of MySQL. 

Generally, you use this feature for both purposes. Copy your data structure 
and data every once in a while Gust in case Godzilla attacks your server or 
something). 

Typically, you build your data on one server and want to migrate it to 
another server. The easiest way to do it is by building the database on one 
server. You can then export the script for building the SQL file and load it 
into the second server. 
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Figure 2-19: 

You can 

specify 

several 

options for 

outputting 

your SQL 

code. 
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Creating XML data 

P"^ lOnemore approach to saving data is through XML. phpMyAdmin creates a 

1 |fj [j Q Q ICiQird form of XML encapsulating the data. The XML output looks like 



<?xml version=" 1 . 0 " encodings "utf -8 " ?> 
< ! — 

- phpMyAdmin XML Dump 

- version 2.9.2 

- http://www.phpmyadmin.net 

- Host: localhost 

- Generation Time: Dec 08, 2007 at 08:16 PM 

- Server version: 5.0.33 

- PHP Version: 5.2.1 



< ! -- 

- Database: 'xfd 1 
--> 

<xf d> 

<!-- Table contact --> 
<contact> 

<contactID>l</contactID> 

<name>Bill Gates</name> 

<company>Microsof t</company> 

<email>bill@msBob . com</ email> 
</contact> 
<contact> 

<contactID>2< /contact ID> 

<name>Steve Jobs</name> 

< c ompany > App 1 e < / company > 

<email>steve@rememberNewton. com</email> 
</contact> 
<contact> 

<contactID>3</ contact ID> 

<name>Linus Torvalds</name> 

<company>W3C</company> 

<email>linus@gnuWho . org</email> 
</contact> 
<contact> 

<contactID>4</ contact ID> 

<name>Andy Harris</name> 

< c ompany > Wiley Press</company> 

<email>andy@aharrisBooks .net</email> 
</contact> 
</xfd> 



XML is commonly used as a common data language, especially in AJAX 
applications. 
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In This Chapter 

v Understanding why single-table databases are inadequate 

c* Recognizing common data anomalies 

C* Creating entity-relationship diagrams 

V Using DBDesigner to create data diagrams 

C" Understanding the first three normal forms 

is Defining data relationships 



Abases can be decepUve. Bve„ .hough phases a rc p re „ y eas y ,o 
♦"^create, beginners usually run into problems as soon as they start 
working with actual data. 

Computer scientists (particularly a gentleman named E.F. Codd in the 1970s) 
have studied potential data problems and defined techniques for organizing 
data. This scheme is called data normalization. In this chapter, you discover 
why single-table databases rarely work for real-world data and how to create 
a well-defined data structure according to basic normalization rules. 

On the CD-ROM, I include a script called buildHero . sql that builds all the 
tables in this chapter. Feel free to load that script into your MySQL environ- 
ment to see all these tables for yourself. 

Recognizing Problems With Sinqle-labie Data 

Packing everything you've got into a single table is tempting. Although you 
can do it pretty easily (especially with SQL) and it seems like a good solu- 
tion, things can go wrong pretty quickly. 

Table 3-1 shows a seemingly simple database describing some superheroes. 
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Table 3-1 



A Sample Database 





Powers 


villain 


riot 


Mission 




l\^^imber 


Sewer snake 
of doom, 
unclogging, 
ability to 
withstand 
smells 


Septic 

Slime 

Master 


Overcome 
Chicago 
with slime 


Stop the 
Septic Slime 


37 


Binary Boy 


Hexidecimation 

beam, 

obfuscation 


Octal 


Eliminate 
the numerals 
8 and 9 


Make the world 
safe for binary 
representation 


19 


The Janitor 


Mighty Mop 


Septic Slime 
Master 


Overcome 
New York 
with slime 


Stop the Septic 
Slime 


41 



It seems that not much can go wrong here because the database is only 
three records and six fields. The data is simple, and there isn't that much of 
it. Still, a lot of trouble is lurking just under the surface. The following sec- 
tions outline potential problems. 

The identity crisis 

What's Table 3-1 about? At first, it seems to be about superheroes, but some 
of the information isn't about the superhero as much as things related to the 
superhero, such as villains and missions. This issue may not seem like a big 
deal, but it causes all kinds of practical problems later on. A table should be 
about only one thing. When it tries to be about more than that, it can't do its 
job as well. 

Every time a beginner (and, often, an advanced data developer) creates a 
table, the table usually contains fields that don't belong there. You have to 
break things up into multiple tables so that each table is really about only one 
thing. The process for doing so solves a bunch of other problems, as well. 

The listed porters 

Take a look at the powers field. Each superhero can have more than one 
power. Some heroes have tons of powers. The problem is, how do you 
handle a situation where one field can have a lot of values? You frequently 
see the following solutions: 

♦ One large text Held: That's what I did in this case. I built a massive (255 
character) varchar field and hoped it would be enough. The user just 
has to type all the possible skills. 

♦ Multiple fields: Sometimes, a data designer just makes a bunch of fields, 
such as powerl, power2, and so on. 
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list of DO\ 





Both these solutions have the same general flaw. You never know how much 
room to designate because you never know exactly how many items will be 
Say that you choose the large text field approach. You may have a 
ver hero with a lot of powers, so you fill up the entire field with a 
list of powers. What happens if your hero learns one more power? Should 
you delete something just to make things fit? Should you abbreviate? 



If you choose to have multiple power fields, the problem doesn't go away. You 
still have to determine how many skills the hero can have. If you designate 
ten skill fields and one of your heroes learns an eleventh power, you've got a 
problem. 

The obvious solution is to provide far more room than anybody needs. If it's 
a text field, make it huge, and if it's multiple fields, make hundreds of them. 
Both solutions are wasteful. Remember, a database can often have hundreds 
or thousands of records, and each one has to be the same size. If you make 
your record definition bigger than it needs to be, this waste is multiplied 
hundreds or thousands of times. 

You may argue that this is not the 1970s. Processor power and storage space 
are really cheap today, so why am I worrying about saving a few bytes here 
and there? Well, cheap is still not free. Programmers tend to be working with 
much larger data sets than they did in the early days, so efficiency still mat- 
ters. And here's another important change. Today, data is much more likely 
to be transmitted over the Internet. The big deal today isn't really processor 
or storage efficiency. Today's problem is transmission efficiency, which 
comes down to the same principle: Don't store unnecessary data. 

When databases have listed fields, you tend to see other problems. If the 
field doesn't have enough room for all the data, people will start abbreviat- 
ing. If you're looking for a hero with invisibility, you can't simply search for 
"invisibility" in the powers field because it may be "inv," "in," or "invis" (or 
even "can't see"). If you desperately need an invisible hero, the search can 
be frustrating, and you may miss a result because you didn't guess all the 
possible abbreviations. 

If the database uses the listed fields model, you have another problem. Now, 
your search has to look through all ten (or hundred) power fields because you 
don't know which one holds the "invisible" power. This problem makes your 
search queries far more complicated than they would have been otherwise. 

Another so-called solution you sometimes see is to have a whole bunch of 
Boolean fields: Invisibility, Super-speed, X-ray vision, and so on. This fix solves 
part of the problem because Boolean data is small. It's still troublesome, 
though, because now the data developer has to anticipate every possible 
power. You may have an other field, but it then re-introduces the problem of 
listed fields. 
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Listed fields are a nightmare. 
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Repetition and reliability 

nother common problem with data comes with repetition. If you allow data 



epeated in your database, you can have some really challenging side 
etfs. Refer to Table 3-1, earlier in this chapter, and get ready to answer 
some questions about it. . . . 



What is the Slime Master's evil plot? 




This question seems simple enough, but Table 3-1 provides an ambiguous 
response. If you look at the first row (The Plumber), the plot is Overcome 
Chicago with slime. If you look at The Janitor, you see that the plot is to 
Overcome New York with slime. Which is it? Presumably, it's the same plot, 
but in one part of the database, New York is the target, and elsewhere, it's 
Chicago. From the database, you can't really tell which is correct or if it 
could be both. I was required to type in the plot in two different records. It's 
supposed to be the same plot, but I typed it differently. Now, the data has a 
conflict, and you don't know which record to trust. 

Is it possible the plots were supposed to be different? Sure, but you don't 
want to leave that assumption to chance. The point of data design is to ask 
exactly these questions and to design your data scheme to reinforce the 
rules of your organization. 

Here's a related question. What if you needed to get urgent information to 
any hero fighting the Septic Slime Master? You'd probably write a query like 



SELECT * FROM hero WHERE villain 



'Septic Slime Master 1 



That query is a pretty reasonable request, but it wouldn't work. The villain in 
The Janitor record is the Septic Slim Master. Somebody mistyped something 
in the database, and now The Janitor doesn't know how to defeat the Slime 
Master. 




If your database allows duplication, this type of mistake will happen all 
the time. 



In general, you don't want to enter anything into a database more than once. 
If you had a way to enter in the Septic Slime Master one time, that should 
eliminate this type of problem. 



Fields that chanqe 

Another kind of problem is evident in the Age field. (See, even superheroes 
have a mandatory retirement age.) Age is a good example of a field that 
shouldn't really be in a database because it changes all the time. If you have 
age in your database, how are you going to account for people getting older? 
Do you update the age on each hero's birthday? (If so, you need to store that 



Introducing Entitu-Retationship Diagrams 




birthday, and you need to run a script every day to see whether it's any- 
body's birthday.) You could just age everybody once a year, but this solution 
^^(je^^^eem like a good option, either. 

Whenever possible, you want to avoid fields that change regularly and instead 
use a formula to generate the appropriate results when you need them. 



Deletion problems 



Another kind of problem is lurking right under the surface. Say that you had 
to fire the Binary Boy. (With him, everything is black and white. You just 
can't compromise with him.) You delete his record, and then you want to 
assign another hero to fight Octal. When you delete Binary Boy, you also 
delete all the information about Octal and his nefarious scheme. 
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In a related problem, what if you encounter a new villain, and you haven't 
yet assigned a hero to this villain? The current data design doesn't allow you 
to add villains without heroes. You have to make up a fake hero, and that 
just doesn't seem right. 

Introducing Entitg-Relationship Diagrams 

You can solve all the problems with the database shown in Table 3-1 by 
breaking the single table into a series of smaller, more specialized tables. 

The typical way of working with data design is to use a concept called an 
Entity-Relationship (ER) diagram. This form of diagram usually includes 
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♦ Entities: Typically, a table is an entity, but you see other kinds of entities, 
too. An entity is usually drawn as a box with each field listed inside. 

♦ Relationships: Relationships are drawn as lines between the boxes. As 
you find out about various forms of relationships, I show you the partic- 
ular symbols used to describe these relationship types. 



Using DBbesigner h to draw ER diagrams 

You can create ER diagrams with anything (I typically use a whiteboard), but 
some very nice free software can help. One particularly nice program is 
called DBDesigner 4. This software has a number of really handy features: 

♦ Visual representation of database design: DBDesigner allows you to 
define a table easily and then see how it looks in ER form. You can create 
several tables and manipulate them visually to see how they relate. 

♦ An understanding of ER rules: DBDesigner is not simply a drawing pro- 
gram. It's specialized for drawing ER diagrams, so it creates a standard 
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design for each table and relationship. Other data administrators can 
understand the ER diagrams you create with this tool. 

tegration with MySQL: Once you've created a data design you like, 
u can have DBDesigner create a MySQL script to create the databases 
you've defined. In fact, you can even have DBDesigner look at an existing 
MySQL database and create an ER diagram from it. 

♦ Ability to manipulate data: You can connect to an actual MySQL data- 
base and use DBDesigner as a front end. You can view queries, and add 
and edit data, all through the tool. 



Creating a table definition in DBDesigner 

Creating your tables in DBDesigner is a fairly easy task: 

/. Create a new model. 

Choose FileONew to create a new model. Figure 3-1 shows DBDesigner in 
action. 

2. Create a new table. 

You can use the icons along the left border to control the diagram. The 
New Table icon looks like two grids. It's near the center of the icon strip. 
You see a blank table like Figure 3-2. 



DBDesigner 4 - [DB Model | Noname2] 
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Figure 3-2: 

Now, your 
model has a 
table in it. 
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3. Edit the table. 

Right-click the table and choose Edit Object to define the table's charac- 
teristics. You get a screen that looks something like Figure 3-3. Add the 
fields as I've done in the example. Note that the first field is automatically 
the primary key. 



Table Name 



MYISAM [Standard] 



Weak entity 
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| DataType 
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Figure 3-3: 

Editing the 

table 

definition. 
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it. Extract the code. 

If you want, you can see the SQL code used to create the table you just 
^fesigned. Simply right-click the table and choose Copy SQL Table 
*o-eate. The create statement for this table is copied to the Clipboard, 
and you can paste it to your script. Figure 3-4 shows the hero table in 
ER form. 
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Figure 3-4: 

Now, the 
diagram of 
the hero 
table is 
visible. 
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Connecting to a database With bBbesigner 

You don't ever have to connect to a database using DBDesigner, but it can be 
useful. If you've already got MySQL running on your local machine, here's 
how you connect DBDesigner to your database: 

7. Make sure that MySQL is running. 

DBDesigner is looking for a running version of MySQL. 

2. Connect to the database. 

Choose DataOConnect to Database. Selecting this tool creates a dialog 
box like Figure 3-5. 
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Figure 3-5: 

This is the 
database 
connection 
dialog box. 
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3. Navigate to MySQL Localhost. Book Vl 

Chapter 3 

You'll be connecting to a MySQL database on the local server (most 
likely), so highlight Localhost under MySQL. Click the plus sign to see 
the list of databases under Localhost. You'll probably be prompted for a 
username and password. 

4. Select the database you want to work with. 



Each diagram should be about only one database (at least, in this stage 
of your career.) Find the database you want to use and select it, as 
shown in Figure 3-6. 
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Figure 3-6: 

I'm selecting 
the xfd 
database. 
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5. Create a new database connection. 

The New Database Connection button appears on the bottom of the 
screen. You see the Database Connection Editor dialog box, shown in 
Figure 3-7. 

6. Enter connection details. 

Give the connection a name and specify the username and password 
used to access that database. (Check Chapter 2 of this minibook for 
more details on assigning users and passwords to databases.) 
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Figure 3-7: 

Enter the 
name of 
your data- 
base, the 
username, 
and pass- 
word. 
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Password: |™1 
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Driver: { MySQL | i\ 



U. 4bort 



vok 



7. Test your connection. 

Go back to the Localhost entry in the Select Database Connection 
window, and you should now see your new connection, as shown in 
Figure 3-8. Select the connection, check the username and password, 
and click Connect. 



Figure 3-8: 

Now, the xfd 
connection 
is available. 
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8. Verify your connection. 

If nothing went wrong, it probably worked. When you get back to the 
DBDesigner screen, you see text in the lower-right corner saying 
Connected to Database. Now, your changes in the diagram can be 
reflected in the actual database. 
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Manipulating your data from DBDesigner 

_Yc|i c ^L use DBDesigner to view and manipulate your database, as well. You 
J |fj fj fj fyf\ < 'i* data from your modeling software to the database with the 

l"^ Synchronization command, or extract data from the database and bring it 

into the model with the Reverse Engineer command. Both are found on the 
Database menu. 

I've found the Reverse Engineer command to be more reliable. I still like to 
build scripts in a text editor and then have the DBDesigner show me what it 
sees, but DBDesigner doesn't always write code as well as I can. 

The easiest way to work with your data is to type commands in Query mode: Book VI 

Chapter 3 

/. Be sure you're connected to your database. 

Queries are pretty silly without a database. z 

o" ° 

2. Get DBDesigner into Query mode. = 3 




The top button toggles between Design and Query mode. Query mode 
looks like Figure 3-9. 
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Figure 3-9: 

DBDesigner 
in query 
mode. Note 
that I'm 
connected 
to xfd. 
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3. Type a query into the query box 

DropBook& 



The bottom-center panel allows you to enter queries, 
ecute the query. 



An icon next to the query window looks like a barrel with lightning. This 
icon executes whatever query you've just entered. The query results 
appear in the bottom-right panel. 

5. Use Query mode shortcuts. 

If you click the mouse over a table and drag, you see a little context 
menu of SQL commands, similar to Figure 3-10. Use this menu to get a 
quick SQL query started in the query window. You still need to edit the 
query, but this shortcut is a really handy timesaver. 

6. Edit data. 

If you have a table query available, you can add and modify records in 
the database. Experiment with the buttons on the right-hand panel to 
see how this function works. 



Figure 3-10: 

DBDesigner 
can help 
you build 
queries. 



DBDesigner 4 - [DB Model j Noname2] 



B'a &lit Cjsolay Database fflugns Options Windows Help 



•J 







hero 




f heroID: 


INTEGER 


O name: VARCHAR(50) 

« birthday: DATE 

% missionID: INTEGER 



:: :-= -- -: - ::- 



1 



□ 



Common ""V AII >i/oei\ 



^INTEGER 
&FL0AT 
J&VARCHAR 
-j^DATETIME 



^TEXT 



v^LONGBLOB 
i^Varchatt201 



ivVs,ch=ir[255) 



DB Model 
Model 



S -Jt 



Introducing Normalization 



Introducing Normalization 



DpBooks 



cram all your data into a single table usually causes problems. The 
or solving these problems is called data normalization. Normalization 
is really a set of rules. When your database follows the first rule, it's said to be 
in first normal form. For this introductory book, you get to the third normal 
form, which is suitable for most applications. 



First normal form 

The official definitions of the normal forms sound like the offspring of a lawyer 
and a mathematician. Here's an official definition of the first normal form: 

A table is in first normal form if and only if it represents a relation. It does 
not allow nulls or duplicate rows. 



Yeah, whatever. 



Here's what it means in practical terms: 



Eliminate listed fields. 



A database is in first normal form if 



♦ It has no repeating fields. Take any data that would be in a repeating 
field and make it into a new table. 

♦ It has a primary key. Add a primary key to each table. (Some would 
argue that this requirement isn't necessarily part of first normal form, 
but it'll be necessary in the next step, anyway.) 

In a practical sense, the first normal form means getting rid of listed fields 
and making a new table to contain powers. Figure 3-1 1 shows an ER diagram 
of the data in first normal form. 

A couple of things happen here: 

7. Make a new table called power. 

This table contains nothing but a key and the power name. 

2. Take the power field away from the hero table. 
The hero table no longer has a power field. 

3. Add a primary key to both tables. 

Both tables now have an integer primary key. Looking over my tables, 
there are no longer any listed fields, so I'm in first normal form. 
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Figure 3-11: 

Now, I have 
two tables. 




* heroID: INTEGER 
<> name: VARCHAR(50) 
<* birthday: DATE 
ft missionID: INTEGER 



power » 

i powerlD: INTEGER 
O name: VARCHAR(50) 
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All this is well and good, but the user really wants this data connected, so 
how do you join it back together? For that answer, see Chapter 4 of this 
minibook. 



Second normal form 



The official terminology for the second normal form is just as baffling as the 
first normal form: 

A table is in second normal form (2NF) only if it is in INF and all nonkey fields 
are dependant entirely on the entire candidate key, not just part of it. 

Huh? You've gotta love these computer scientists. 

In practical terms, second normal form is pretty easy, too. It really means 
Eliminate repetition. 

Look at all those places where you've got duplicated data and create new 
tables to take care of them. 



In the heroes data (shown in Table 3-1, earlier in this chapter), you can elimi- 
nate a lot of problems by breaking the hero data into three tables. Figure 3-12 
illustrates one way to break up the data. 
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Figure 3-12: 

Now, I have 
three tables: 
hero, power, 
and mission. 



hero » 

1 heroID: INTEGER 
O name: VARCHAR(50) 
O birthday: DATE 
ft missionID: INTEGER 



power 

1 powerlD: INTEGER 



v name: VARCHAR(50) 



mission 



] missionID: INTEGER 

v description: VARCHAR(50) 
^ villain: VARCHAR(30) 
O plot: VARCHAR(50) 
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Many of the problems in the badHero design happen because apparently 
more than one hero can be on a particular mission, and thus the mission 
data gets repeated. By separating mission data into another table, I've guar- 
anteed that the data for a mission is entered only once. 

Note that each table has a primary key and none of them has listed fields. The 
same data won't ever be entered twice. The solution is looking pretty good! 

Notice that everything related to the mission has been moved to the mission 
table. I added one field to the hero table, which contains an integer. This 
field is called a foreign key reference. You can find out much more about how 
foreign key references work in Chapter 4 of this minibook. 

Third normal form 

The third normal form adds one more requirement. Here is the official 
definition: 

A table is in 3NF it is in 2NF and has no transitive dependencies on the candi- 
date key. 

Wow. These definitions get better and better. Once again, it's really a lot 
easier than it sounds: 



Ensure functional dependency. 
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In other words, check each field of each table and ensure that it really 
describes what the table is about. For example, is the plot related to the 
n or the hero? What about the villain? 




letricky thing about functional dependency is that you often don't really 
know how the data is supposed to be connected. Only the person who uses 
the data really knows how it's supposed to work. (Often, they don't know, 
either, when you ask them.) You have to work with the client to figure out 
exactly what the business rules (the rules that describe how the data really 
works) are. You can't really tell from the data itself. 

The good news is that, for simple structures like the hero data, you're often 
already in third normal form by the time you get to second normal form. 
Still, you should check. 

Once a database is in third normal form, you've reduced the possibility of 
several kinds of anomalies, so your data is far more reliable than it was in 
the past. Several other forms of normalization exist, but third normal form is 
enough for most applications. 



Identifying Relationships in \lour Data 

After you normalize the data (see the preceding section), you've created the 
entities (tables). Now, you need to investigate the relationships between 
these entities. 

Three main types of data relationships exist (and of these, only two are 
common): 

♦ One-to-one relationships: Each element of table A is related to exactly 
one element of table B. This type of relationship isn't common because if 
a one-to-one relationship exists between two tables, the information can 
be combined safely into one table. 

♦ One-to-many relationship: For each element of table A, there could be 
many possible elements in table B. The relationship between mission 
and hero is a one-to-many relationship, as each mission can have many 
heroes, but each hero has only one mission. (My heroes have attention 
issues and can't multitask very well.) Note that hero and mission are not 
a one-to-many relationship, but a many-to-one. The order matters. 

♦ Many-to-many relationship: This type of relationship happens when an 
element of A may have many values from B, and B may also have many 
values of A. Usually, listed fields turn out to be many-to-many relation- 
ships. In the hero data, the relationship between hero and power is a 
many-to-many relationship because each hero can have many powers, 
and each power can belong to multiple heroes. 

You can use an ER tool to diagram the various relationship types. Figure 3-13 
shows this addition to the hero design. 
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Figure 3-13: 

Now, I've 
added 
relation- 
ships. 



V heroID: INTEGER(ll) 
\<i name: VARCHAR(50) 
<} birthday: DATE 
% missionID: INTEGER(ll) (FK) 
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Note that DBDesigner doesn't actually allow you to draw many-to-many 
joins. I drew that into Figure 3-13 to illustrate the point. In the next chapter, I 
show how to emulate many-to-many relationships with a special trick called 
a link table. 




ER diagrams use special symbols to represent different kinds of relation- 
ships. The line between tables indicates a join, or relationship, but the type 
of join is indicated by the markings on the ends of the lines. In general, the 
crow's feet or filled-in circle indicate many, and the double lines indicate 1. 

ER diagrams get much more complex than the simple ones I show here, but for 
this introduction, the one and many symbols are enough to get you started. 
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In This Chapter 

Using SQL functions 
j-" Creating calculated fields 
W Working with date values 
w Building views 

V Creating inner joins and link tables 



Single tables aren't sufficient for most data. If you understand the rules 
of data normalization (see Chapter 3 of this minibook), you know how 
to break your data into a series of smaller tables. The question remains, 
though: How do you recombine all these broken-up tables to make some- 
thing the user can actually use? 

In this chapter, you discover several techniques for combining the data in 
your tables to create useful results. 

I wrote a quick PHP script to help me with most of the figures in this chap- 
ter. Each SQL query I intend to look at is stored in a separate SQL file, and I 
can load up the file and look at it with the PHP code. Feel free to look over 
the code for showQuery on the CD-ROM. If you want to run this code your- 
self, be sure to change the username and password to reflect your data set- 
tings. I also include a script called buildHero . sql that creates a database 
with all the tables and views I mention in this chapter. Feel free to load that 
script into your database so that you can play along at home. 



Calculating Virtual Fields 

Part of data normalization means that you eliminate fields that can be calcu- 
lated. In the hero database described in Chapter 3 of this minibook, data 
normalization meant that you don't store the hero's age, but his or her 
birthday instead (see Chapter 3 of this minibook). Of course, if you really 
want the age, you should be able to find some way to calculate it. SQL 
includes support for calculating results right in the query. 

Begin by looking over the improved hero table in Figure 4-1. 
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The original idea for the database, introduced in Table 3-1 in Chapter 3 of 
this minibook, was to keep track of each hero's age. This idea was bad 
because the age changes every year. Instead, I stored the hero's birthday 
But what if you really do want the age? 

Introducing SQL Functions 

It turns out SQL supports a number of useful functions that you can use to 
manipulate data. Table 4-1 shows especially useful MySQL functions. Many 
more functions are available, but these functions are the most frequently used. 



Table 4-1 


Useful MySQL Functions 


Function 


description 


CONCAT(A, B) 


Concatenates two string results. Can be used to create a single 




entry from two or more fields. For example, combine 




f irstName and lastName fields. 


FORMAT (X, D) 


Format the numberXto the number of digits D. 


CURRDATE ( ) , 


Return the current date or time. 


CURRTIME ( ) 





NOW( ) 



Return the current date and time. 
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Function 




Dc scrip tion 


MfcNTHf) , 


DAY ( ) , 
WEEK ( ) , 
) 


Extract the particular value from a date value. 


HOUR ( ) , 
SECOND ( ) 


MINUTE ( ) , 


Extract the particular value from a time value. 


DATEDIFF (A, B) 


Frequently used to find the time difference between two events 
(age). 


SUBTIMES(A, B) 


Determine the difference between two times. 



FROMDAYS ( INT) Converts an integer number of days into a date value. 

Typically, you use a programming language, such as PHP, to manage what 
the user sees, and programming languages tend to have a much richer set of 
functions than the database. Still, it's often useful to do certain kinds of func- 



Knortinq When to calculate Virtual fields 

You calculate data in these situations: 

♦ You need to create a single field from multiple text fields. You might 
need to combine first, middle, and last name fields to create a single 
name value. You can also combine all the elements of an address to 
create a single output. 

♦ You want to do a mathematical operation on your data. Imagine that 
you're writing a database for a vegetable market, and you want to calcu- 
late the value from the costPerPound field plus the pounds Purchased 
field. You can add the mathematical operation in your query. 

♦ You need to convert data. Perhaps you stored weight information in 
pounds, and you want a query to return data in kilograms. 

♦ You want to do date calculations. Often, you need to calculate ages from 
specific days. Date calculations are especially useful on the data side 
because databases and other languages often have different date formats. 
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Calculating Date Values 

The birthday value is stored in the hero table, but what you really want to 
know is the hero's age. It's very common to have an age stored in a database. 
You often need to output this age in years, or perhaps in years and months. 
Functions can help you do this calculation. 

Begin by looking at a simple function that tells you the current date and 
time, as I do in Figure 4-2. 
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The current date and time by themselves aren't that important, but you can 
combine this information with other functions, described in the following 
sections, to do some very interesting things. 

Using. DATEDIFF to determine age 

The NOW ( ) function is very handy when you combine it with the datediff ( ) 
function, as shown in Figure 4-3. 

This query calculates the difference between the current date, NOW ( ) , and 
each hero's birthday. The datediff function works by converting both 
dates into integers. It can then subtract the two integers, giving you the 
result in number of days. 




You normally name the fields you calculate because, otherwise, the formula 
used to calculate the results becomes the virtual field's name. The user 
doesn't care about the formula, so use the AS feature to give the virtual field 
a more useful name. 



Adding a caicvdation to get years 

Of course, most people don't think about age in terms of days. Age (at least, 
of people) is typically measured in years. One simple solution is to divide 
the age in days by 365 (the number of days in a year). Figure 4-4 shows this 
type of query. 
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This code is almost like the query shown in Figure 4-3, except it uses a math- 
ematical operator. You can use most of the math operators in queries to do 
conversions. Now, the age is specified in years, but the decimal part is 
dd. Normally, you either go with entire year measurements or work 
with months, weeks, and days. 



Concerting the days integer into a date 

The year ( ) function extracts only the years from a date, and the month ( ) 
function pulls out the months, but both these functions require a date 
value. The datediff ( ) function creates an integer. Somehow, you need to 
convert the integer value produced by datediff ( ) back into a date value. 
(For more on this function, see the section "Using DATEDIFF to determine 
age," earlier in this chapter.) 

Figure 4-5 is another version of a query that expresses age in terms of years 
and months. 



This query takes the datediff ( ) value and converts it back to a date. The 
actual date is useful, but it has some strange formatting. If you look carefully 
at the dates, you'll see that they have the age of each hero, but it's coded as 
if it was a particular date in the ancient world. 
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Figure 4-6: 

The YEARO, 
MONTHO, 
and DAY() 
functions 
return parts 
of a date. 



month ( ) functions to pull out the hero's age in a more readable way as 
illustrated by Figure 4-6. 

The query is beginning to look complex, but it's producing some really nice 
output. Still, it's kind of awkward to have separate fields for year, month, 
and day. 
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Concatenating to make one field 

If you have year, month, and day values, it would be nice to combine some of 
this information to get a custom field, as you can see in Figure 4-7. 

This query uses the CONCAT ( ) function to combine calculations and literal 
values to make exactly the output the user is expecting. Even though the 
birthday is the stored value, the output can be the age. 
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no way I'm writing that every time 



owTvrrat^dTTre thinking. All this fancy func- 
tion stuff is well and good, but there's no stinkin' 
way you're going to do all those function gym- 
nastics every time you want to extract an age 
out of the database. Here's the good news: You 
don't have to. It's okay thatthe queries are get- 
ting a little tricky because you'll write code to 
do all the work for you. You write it only once, 



and then your code does all the heavy lifting. 
Generally, you write PHP code to manage each 
query inside a function. Once you've tested it, 

you run thatfunction and off you go You can 

also use a little gem called the view, described 
in the "Creating a View" section. Views allow 
you to store complex queries right in your data- 
base. 
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SELECT 

name as ■ hero ' , 
CONCAT ( 

YEAR (FROM_DAYS (DATEDIFF (NOW ( ) , 
1 years , ' , 

MONTH (FROM_DAYS (DATEDIFF (NOW ( ) 
' months ' 
) AS ' age ' 
FROM 
hero ; 



birthday) ) ) , 
birthday) ) ) , 



Figure 4-7: 

Now, the 
age is back 
in one field, 
as originally 
intended. 




Creating a View) 



The query that converts a birthday into a formatted age is admittedly com- 
plex. Normally, you'll have this query predefined in your PHP code so that 
you don't have to think about it any more. If you have MySQL 5.0 or later, 
though, you have access to a wonderful tool called the view. A view is some- 
thing like a virtual table. 
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The best way to understand a view is to see a sample of it in action. Take a 
look at this SQL code: 



W heroAgeView AS 



name as ' hero 1 , 
CONCAT ( 

YEAR { FROM_DAYS ( DATEDIFF ( NOW ( ) , birthday) ) ) , 
' years, 1 , 

MONTH ( FROM_DAYS ( DATEDIFF (NOW ( ) , birthday) ) ) , 
' months 1 
) AS ' age ' 
FROM 
hero ; 



If you look closely, it's exactly the same query used to generate the age from 
the birth date, just with a create view statement added. When you run 
this code, nothing overt happens, but the database stores the query as a 
view called heroview. Figure 4-8 shows the cool part. 

This code doesn't look really fancy, but look at the output. It's just like you 
had a table with all the information you wanted, but now the data is guaran- 
teed to be in a decent format. 
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SELECT * FROM heroAgeView; 



Result 





Figure 4-8: 

This simple 
query hides 
a lot of 
complexity. 
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what if I'm stuck with MySQL 4.0? 



re sTi^jreat that it's hard to imagine 
working with data without them. However, your 
hosting service may not have MySQL 5.0 or 
later installed, which means you aren't able to 
use views. All is not lost. You can handle this 
issue in two ways. 

The most common approach is to store all 
the queries you're likely to need (the ones 
that would be views) as strings in your PHP 
code. Execute the query from PHP, and you've 



essentially executed the view. This method is 
how most programmers did it before views 
were available in MySQL. 

Another approach is to create a new table 
called something like storeQuery in your 
database. Put the text of all your views inside 
this table, and then you can extract the view 
code from the database and execute it using a 
second pass at the data server. 



After you create a view, you can use it in subsequent select statements 
as if it were a table! Here are a couple of important things to know about 
views: 

♦ They aren't stored in the database. The view isn't really data; it's just a 
stored query. It looks and feels like a table, but it's created in real time 
from the tables. 

♦ You can't write to a view. Because views don't contain data (they reflect 
data from other tables), you can't write directly to them. You don't use 
the insert or update commands on views, as you do ordinary tables 

♦ They're a relatively new feature of MySQL. Useful as they are, views 
weren't added to MySQL until Version 5.0. If your server uses an earlier 
version, you'll have to do some workarounds, described in the sidebar 
"So what if I'm stuck with MySQL 4.0?". 

♦ You can treat views as tables in select statements. You can build 
select statements using views as if they were regular tables. 

Some database packages make it appear as if you can update a view, but 
that's really an illusion. Such programs reverse-engineer views to update 
each table. This approach is far from foolproof, and you should probably 
avoid it. 
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When I normalized the hero database in Chapter 3 of this minibook, I broke 
it up into several tables. Take a quick look at the hero table in Figure 4-9. 
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You probably noticed that most of the mission information is now gone from 
this table, except one important field. The missioniD field is an integer field 
that contains the primary key of the mission table. A foreign key is a field that 
contains the primary key of another table. Foreign keys are used to reconnect 
tables that have been broken apart by normalization. 

Look at the mission table in Figure 4-10, and it begins to make sense. 

The mission table doesn't have a link back to the hero. It can't because any 
mission can be connected to any number of heroes, and you can't have a 
listed field. 

Building a Cartesian join and an inner join 

Compare the hero and mission tables, and you see how they fit together. The 
missioniD field in the hero table identifies which mission the hero is on. 
None of the actual mission data is in the hero field, just a link to which mis- 
sion the player is on. 

Creating a query with both tables, as in Figure 4-11, is tempting. This query 
appears to join the tables, but it obviously isn't doing the right thing. You 
have only three heroes and two missions, yet this query returns six rows! 
What's happened here is called a Cartesian join. It's a combination of all the 
possible values of hero and mission, which is obviously not what you want. 
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Figure 4-10: 

The mis- 
sion table 
handles 
mission 
data but 
has no link 
to the hero. 
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SELECT 

hero. name AS 'hero' , 
hero.missionlD AS 1 heroMID ' , 
mission .missionID AS 'missMID' , 
mission . description as 'mission' 

FROM 

hero, mission; 
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Figure 4-11: 

This query 
joins both 
tables, but it 
doesn't 
seem riaht. 




hero 


heroMID 


missMID 


mission 


The Plumber 


1 


i 


Stop the septic slime 


The Plumber 


I 




Make the world safe for Binary representation 


Binary Boy 




: 


Stop the septic slime 


Binary Boy 






Make the world safe for Binary representation 


The Janitor 


1 


: 
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You don't really want all these values to appear; you want to see only the ones 
where the hero table's missioniD matches up to the missioniD field in the 
able. In other words, you want a query that says only return rows 
two values of missioniD are the same. That query may look like 
Figure 4-12. It's almost identical to the last query, except this time, a where 
clause indicates that the foreign key and primary key should match up. 



This particular setup (using a foreign key reference to join up two tables) is 
called an inner join. Sometimes, you see the syntax like 



SELECT 

hero. name AS 'hero 1 , 
hero .missioniD AS 'heroMID', 
mission. missioniD AS 'missMID 1 , 
mission. description as 'mission' 

FROM 

hero INNER JOIN mission 

ON 

hero .missioniD = mission. missioniD; 



Some of Microsoft's database offerings prefer this syntax, but it really does 
the same thing: join up two tables. 
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lever your ER diagram indicates a many-to-one relationship, you gener- 
ise an inner join (see the preceding section). Here's how you do it: 




/. Start with the ER diagram. 

No way are you going to get this right in your head! Make a diagram. Use 
a tool like DBDesigner, some other software, pencil and paper, lipstick on 
a mirror, whatever. You need a sketch. 

2. Identify one-to-many relationships. 

You may have to talk with people who use the data to determine which 
relationships are one-to-many. In the hero data, a hero can have only 
one mission, but each mission can have many heroes. Thus, the hero is 
the many side, and the mission is the one side. 

3. Find the primary key of the one table and the many table. 

It. Make a foreign key reference to the one table in the many table. 

Add a field to the table on the many side of the relationship that con- 
tains only the key to the table on the one side. 

You don't need a foreign key in the one table. This concept confuses 
most beginners. You don't need (or want) a link back to the many table 
because you don't know how many you'll need. 

If the preceding steps are hard for you to understand, think back to the hero 
example. Each hero (according to the business rules) can be on only one 
mission. Thus, it makes sense to put a link to the mission in the hero table 
because you have only one mission. Each mission can be related to many 
heroes, so if you try to link missions to heroes, you have listed fields in the 
mission table, violating the first normal form. (For information on the types 
of normal forms, see Chapter 3 of this minibook.) Figure 4-13 shows how it 
works in action. The result of this join looks a lot like the original intention of 
the database, but now it's normalized! 



Counting the advantages of inner joins 

Even though the table in Figure 4-13 contains everything in the original non- 
normalized data set (except for the repeated field), the new version is con- 
siderably better for several reasons: 

♦ No data is repeated. The plot is stored only one time in the database. 
Even though it may appear several times in this output, each value is 
stored only once. 

♦ Searching is much more efficient. Because the data is stored only one 
time, you no longer have to worry about spelling and typing errors. If 
the entry is wrong, it is universally wrong, and you can repair it in only 
one place. 
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♦ The data is organized correctly. Although the user can't see it from this 
output, the tables are now separated so that each type of data goes 
where it belongs. 

♦ The output still looks like what the user wants. Users don't care about 
the third normal form. (For more on forms, see Chapter 3 of this mini- 
book.) They just want to get to their data. This table gives them a query 
that returns the data they're looking for, even though the underlying 
data structure has changed dramatically. 

Building a View) to encapsulate the join 

The inner join query is so useful, it's a dandy place for a view. I created a 
view from it: 



CREATE VIEW heroMissionView AS 
SELECT 

hero . name AS 1 hero ' , 

mission. description AS 'mission 1 , 

mission. villain AS 'villian 1 , 

mission. plot AS 'plot' 
FROM hero, mission 
WHERE 

hero.missionID = mission. missionlD; 



Having a view means that you don't have to recreate the query each time. 
You can treat the view as a virtual table for queries: 



SELECT * FROM heroMissionView; 
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oins are a perfect way to implement one-to-many relationships. If you 
ER diagrams, you often see many-to-many relationships, too. Of course, 
you also need to model them. Here's the secret: You can't really do it. It's true. 
The relational data model doesn't really have a good way to do many-to-many 
joins. Instead, you fake it out. It isn't hard, but it's a little bit sneaky. 



You use many-to-many joins to handle listed data, such as the relationship 
between hero and power. Each hero can have any number of powers, and each 
power can belong to any number of heroes (see the table in Figure 4-14). 

The inner join was easy because you just put a foreign key reference to the 
one side of the relationship in the many table. (See the section "Using an 
Inner Join to Combine Tables," earlier in this chapter.) In a many-to-many 
join, there is no 'one' side, so where do you put the reference? Leave it to 
computer scientists to come up with a sneaky solution. 

First, review the hero table in Figure 4-14. 

Note that this table contains no reference to powers. Now, look at the power 
table in Figure 4-15. You see a lot of powers, but no reference to heroes. 
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Here's the tricky part. Take a look 


at a new table in Figure 4-16. 
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Figure 4-16: 

This new 
table con- 
tains only 
foreign keys! 
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The results of this query may surprise you. The new table contains nothing 
but foreign keys. It doesn't make a lot of sense on its own, yet it represents 
the most important ideas in data. 

Understanding (ink tables 

The hero_power table shown in Figure 4-16 is a brand new table, and it's 
admittedly an odd little duck: 

4- It contains no data of its own. Very little appears inside the table. 

♦ It isn't about an entity. All the tables shown earlier in this chapter are 
about entities in your data. This one isn't. 

♦ It's about a relationship. This table is actually about relationships 
between hero and power. Each entry of this table is a link between hero 
and power 

♦ It contains two foreign key references. Each record in this table links 
an entry in the hero table with one in the power table. 

♦ It has a many-to-one join with each of the other two tables. This 
table has a many-to-one relationship with the hero table. Each record 
of hero_power connects to one record of hero. Likewise, each record of 
hero_power connects to one record of power. 

♦ The two many-to-one joins create a many-to-many join. Here's the 
magical part: By creating a table with two many-to-one joins, you create 
a many-to-many join between the original tables! 

♦ This type of structure is called a link table. Link tables are used to 
create many-to-many relationships between entities. 

Using (ink tables to make many-to-many joins 

Figure 4-17 displays a full-blown ER diagram of the hero data. 

Link tables aren't really useful on their own because they contain no actual 
data. Generally, you use a link table inside a query or view: 

SELECT 

hero . name AS 1 hero ' , 

power . name AS ' power ' 
FROM 

hero, power, hero_power 
WHERE 

hero.heroID = hero_power .heroID 
AND 

power . powerlD = hero_power .powerlD; 
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Here's the 
actual ER 
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Here are some thoughts about this type of query: 

♦ It combines three tables. That complexity seems scary at first, but it's 
really fine. The point of this query is to use the hero_power table to 
identify relationships between hero and power. Note that the from 
clause lists all three tables. 

♦ The where clause has two links. The first part of the where clause links 
up the hero_power table with the hero table with an inner join. The 
second part links up the power table with another inner join. 

♦ You can use another and clause to further limit the results. Of course, 
you can still add other parts to the and clause to make the results solve 
a particular problem, but I leave that alone for now. 

Figure 4-18 shows the result of this query. Now, you have results you can use. 

Once again, this query is an obvious place for a view: 

CREATE VIEW heroPowerView AS 
SELECT 

hero . name AS 1 hero ' , 
power . name AS 1 power ' 
FROM 

hero, power, hero_power 
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WHERE 

hero.heroID = hero_power .heroID 
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er.powerlD = hero_power .powerlD; 




Typically, you won't do your results exactly like this view. Instead, you dis- 
play information for, say, Binary Boy, and you want a list of his powers. It isn't 
necessary to say Binary Boy three times, so you tend to use two queries 
(both from views, if possible) to simplify the task. For example, look at these 
two queries: 

SELECT * FROM heroMissionView WHERE hero = 'binary boy 1 ; 
SELECT power FROM heroPowerView WHERE hero = 'binary boy'; 

The combination of these queries give you enough data to describe every- 
thing in the original table. Typically, you attach all this data together in your 
PHP code. Figure 4-19 shows a PHP page using both queries to build a com- 
plete picture of Binary Boy. 
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The code is standard PHP data access, except it makes two passes to the 
database: 

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang = "EN" xml : lang = "EN" dir = "ltr"> 
<head> 

<meta http-ecruiv="content-type" content^" text /xml; charset=iso-8859-l " /> 
<title>showDetails .php</title> 
<style type = " text/ess "> 
dt { 

float: left; 

width: 4em; 

clear: left; 

} 

dd { 

float: left; 
width: 20em; 

} 

</style> 
</head> 



<body> 
<?php 



hXanaqinq Many-to-Many Joins 



■/ /chang 

OPCS 

//get m 



//connect 

$conn = mysql_connect ( "localhost" , "xfd", "password"); 
//change this password and username to work on your system 
elect_db("xfd") ; 



most information for requested hero 
$hero = "binary boy" ; 
$query = <«HERE 
SELECT 



FROM 

heroMissionView 
WHERE 

hero = ' $hero 1 
HERE ; 



print "<dl> \n" ; 

$result = mysql_query($query, $conn) ; 
$row = mysql_f etch_assoc ( $result ) ; 
foreach ($row as $field => $value) { 

print <<<HERE 

<dt>$field</dt> 

<dd> $value< /dd> 



HERE ; 

} // end foreach 

print " <dt>powers</dt> \n"; 

print " <dd> \n" ; 

print " <ul> \n" ; 



//create another query to grab the powers 

$query = <«HERE 

SELECT 

power 
FROM 

hero Powe rVi ew 
WHERE hero = ' $hero 1 
HERE ; 



//put powers in an unordered list 
$result = mysql_query($query, $conn) ; 
while ($row = mysql_f etch_assoc ($result) ) { 

foreach ($row as $field => $value) { 
print " <li>$value</li> \n" ; 

} // end foreach 
} // end while looop 
print " </ul> \n" ; 
print "</dd> \n" ; 
print "</dl> \n" ; 
?> 

</body> 
</html> 



Refer to Book V to read more on PHP and how it's used to access databases. 
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In This Chapter 

V Understanding AJAX 

W Using JavaScript to manage HTTP requests 
W Creating an XMLHttpRequest object 

Building a synchronous AJAX request 
C* Retrieving data from an AJAX request 

Managing asynchronous AJAX requests 

f 

■ f you've been following the Web trends, you ve no doubt heard of AJAX. 
*S This technology has generated a lot of interest. Depending on who you 
listen to, it's either going to change the Internet or it's a lot of overblown 
hype. In this minibook, I show you what AJAX really is, how to use it, and 
how to use a particular AJAX library to supercharge your Web pages. 

The first thing is to figure out exactly what AJAX is and what it isn't. It isn't: 

♦ A programming language: It isn't one more language to learn along 
with the many others you encounter. 

♦ New: Most of the technology used in AJAX isn't really all that new; it's 
the way the technology's being used that's different. 

♦ Remarkably different: For the most part, AJAX is about the same things 
you'll see in the rest of this book: building compliant Web pages that 
interact with the user. 

So you've got to be wondering why people are so excited about AJAX. It's a 
relatively simple thing, but it has the potential to change the way people 
think about Internet development. Here's what it really is: 

♦ Direct control of client-server communication: Rather than the auto- 
matic communication between client and server that happens with Web 
sites and server-side programs, AJAX is about managing this relation- 
ship more directly. 

♦ Use of the XMLHttpRequest object: This is a special object that's been 
built into the DOM of all major browsers for some time, but it wasn't 
used heavily. The real innovation of AJAX was finding creative (perhaps 
unintentional) uses for this heretofore virtually unknown utility. 
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♦ A closer relationship between client-side and server-side programming: 

Up to now, client-side programs (usually JavaScript) did their own thing, 
■^id server-side programs (PHP) operated without too much knowledge of 
^ch other. AJAX helps these two types of programming work together 
better. 

♦ A series of libraries that facilitate this communication: AJAX isn't that 
hard, but it does have a lot of details. Several great libraries have sprung 
up to simplify using AJAX technologies. You'll find AJAX libraries for both 
client-side languages like JavaScript, and server-side languages like PHP. 

Let's say you're making an online purchase with a shopping cart mechanism. 

In a typical (pre-AJAX) system, an entire Web page is downloaded to the user's 
computer. There may be a limited amount of JavaScript-based interactivity, 
but anything that requires a data request needs to be sent back to the server. 
For example, if you're on a shopping site and you want more information 
about that fur-lined fishbowl you've had your eye on, you might click on the 
"more information" button. This causes a request to be sent to the server, 
which builds an entire new Web page for you containing your new request. 

Every time you make a request, the system builds a whole new page on the 
fly. The client and server have a long-distance relationship. 

In the old days when you wanted to manage your Web site's content, you had 
to refresh each Web page — time-consuming to say the least. But with AJAX, 
you can update the content on a page without refreshing the page. Instead of 
the server sending an entire page response just to update a few words on the 
page, the server just sends the words you want to update and nothing else. 

If you're using an AJAX-enabled shopping cart, you might still click on the fish 
bowl image. An AJAX request goes to the server and gets information about 
the fish bowl, which is immediately placed in the current page, without requir- 
ing a complete page refresh. 

AJAX technology allows you to send a request to the server, which can then 
change just a small part of the page. With AJAX, you can have a whole bunch 
of smaller requests happening all the time, rather than a few big ones that 
rebuild the page in large distracting flurries of activity. 

To the user, this makes the Web page look more like traditional applications. 
This is the big appeal of AJAX: It allows Web applications to act more like 
desktop applications, even if these Web applications have complicated fea- 
tures like remote database access. 

Google's Gmail was the first major application to use AJAX, and it blew people 
away because it felt so much like a regular application inside a Web browser. 
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1 people love snappy acronyms. There's nothing more intoxicating 
nting a term. AJAX is one term which has taken on a life of its own. 
Like many computing acronyms, it may be fun to say, but it doesn't really 
mean much. AJAX stands for Asynchronous JavaScript And XML. Truthfully, 
these terms were probably chosen to make a pronounceable acronym rather 
than for their accuracy or relevance to how AJAX works. 
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A is for asynchronous 

An asynchronous transaction (at least in AJAX terms) is one in which more 
than one thing can happen at once. For example, you can make an AJAX call 
process a request while the rest of your form is being processed. AJAX 
requests do not absolutely have to be asynchronous, but they usually are. 

When it comes to Web design, asynchronous means that you can independ- 
ently send and receive as many different requests as you want. Data may 
start transmitting at any time without having any effect on other data trans- 
missions. You could have a form that saves each field to the database as 
soon as it's filled out. Or perhaps a series of drop-down lists that generates 
the next drop-down list based upon the value you just selected. (It's OK if 
this doesn't make sense right now. It's not an important part of understand- 
ing AJAX, but vowels are always nice in an acronym.) chapter i 

In this chapter, I show you how to do both synchronous and asynchronous 
versions of AJAX. 

J is for JavaScript 

If you want to make an AJAX call, you simply write some JavaScript code that 
simulates a form. You can then access a special object hidden in the DOM 
(the XMLHttpRequest object) and use its methods to send that request to 
the user. Your program acts like a form, even if there was no form there. In 
that sense, when you're writing AJAX code, you're really using JavaScript. Of 
course, you can also use any other client-side programming language that can 
speak with the DOM, including Flash and (to a lesser extent) Java. JavaScript 
is the dominant technology, so it's in the acronym. 

A lot of times, you also use JavaScript to decode the response from the AJAX 
request. 



A is for . . . and) 

I think it's a stretch to use "and" in an acronym, but AJX just isn't as cool as 
AJAX. I guess they didn't ask me. 
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And X is for . . . data 

|""N fTheX is for XML, which is one way to send the data back and forth from the 
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Since the object we're using is the XMLHttpRequest object, it makes sense 
that it requests XML. It can do that, but it can also get any kind of text data. 
You can use AJAX to retrieve all kinds of things: 



♦ Plain old text: Sometimes you just want to grab some text from the 
server. Maybe you have a text file with a daily quote in it or something. 

♦ Formatted HTML: You can have text stored on the server as a snippet of 
HTML/XHTML code and use AJAX to load this page snippet into your 
browser. This gives you a powerful way to build a page from a series of 
smaller segments. You can use this to reuse parts of your page (say 
headings or menus) without duplicating them on the server. 

♦ XML data: XML is a great way to pass data around. (That's what it was 
invented for.) You might send a request to a program that goes to a data- 
base, makes a request, and returns the result as XML. 

♦ JSON data: A new standard called JSON (JavaScript Object Notation) is 
emerging as an alternative to XML for formatted data transfer. It has 
some interesting advantages. 



Making a Basic AJAX Connection 

AJAX uses some pretty technical parts of the Web in ways that may be unfa- 
miliar to you. Read through the rest of this chapter so you know what AJAX 
is doing, but don't get bogged down in the details. Nobody does it by hand! 
(Except people who write AJAX libraries or books about using AJAX.) In 
Chapter 2 of this minibook I show a library that does all the work for you. If 
all these details are making you misty-eyed, just skip ahead to the next chap- 
ter and come back here when you're ready to see how all the magic works. 

The basicAJax.html program shown in Figure 1-1 illustrates AJAX at work. 

When the user clicks on the link, a small pop-up shown in Figure 1-2 appears. 

If you don't get the joke, you need to go rent Monty Python and the Holy Grail. 
It's part of the geek culture. Trust me. In fact, you should really own a copy. 

It's very easy to make JavaScript pop up a dialog, but the interesting thing 
here is where that text comes from. The data is stored on a text file on the 
server. Without AJAX, there is no easy way to get data from the server with- 
out reloading the entire page. 
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You might claim that HTML frames allow you to pull data from the server, 
.■j^ ^Mf\ _but frames have been deprecated in XHTML because they cause a lot of 

problems. You can use a frame to load data from the server, but you 
o all the other cool things with frame-based data that you can with 
AJAX. Even if frames were allowed, AJAX is a much better solution most of 
the time. 

You won't be able to run this example straight from the CD-ROM. Like PHP, 
AJAX requires a server to work properly. If you want to run this program, put 
it in a subdirectory of your server and run it through localhost as you do 
for PHP programs. 

This particular example uses a couple of shortcuts to make it easier to 
understand: 




♦ It isn't fully asynchronous. The program will pause while it retrieves 
data. As a user, you won't even notice this, but as you'll see, this can 
have a serious drawback. It's a bit simpler, so I start with this example 
and then extend it to make the asynchronous version. 

♦ It isn't completely cross-browser-compatible. The AJAX technique I use 
in this program works fine for IE 7 and all versions of Firefox (and most 
other standards-compliant browsers). It does not work correctly in IE 6 
and earlier. I recommend you use j Query or another library (described 
in Chapter 2 of this minibook) for cross-browser compatibility. 



Look over the code, and you'll find it reasonable enough: 

<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang = "EN" xml : lang = "EN" dir = "ltr"> 
<head> 

<meta http-equiv="content-type" content^" text /xml; charset=utf -8 " /> 



<title>Basic AJAX</title> 
<script type = "text/javascript"> 
//<! [CDATA [ 



function getAJAX(){ 

var request = new XMLHttpRequest ( ) ; 
request . open ( "GET" , "beast.txt", false); 
request . send (null) ; 

if (request . status == 200) { 

//we got a response 

alert ( request . responseText ) ; 
} else { 

//something went wrong 

alert ( "Error- " + request . status + ": " + request . statusText) ; 
} // end if 
} // end function 
//}}> 
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</script> 
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<body> 

<hl>Basic AJAX</hl> 

<form action = ""> 
<p> 

<button type = "button" 

onclick = "getAJAX()"> 
Summon the vicious beast of Caerbannog 
</button> 
</p> 
</form> 



</body> 
</html> 



Bmidinq the HTML form 

You don't absolutely need an HTML form for AJAX, but I have a simple one 
here. Note that the form is not attached to the server in any way. 

<form action = ""> 
<p> 

<button type = "button" 

onclick = "getAJAX()"> 
Summon the vicious beast of Caerbannog 
</button> 
</p> 
</f orm> 

This code uses a button, and the button is attached to a JavaScript function 
called getAJAX ( ) . 

All you really need is some kind of structure that can trigger a JavaScript 
function. 

AJAX isn't a complex technology, but it does draw on several other technolo- 
gies. You may need to look over the JavaScript chapters in Book IV if this 
material is unfamiliar to you. Although these examples don't require PHP, they 
do involve server-side responses like PHP does, so AJAX is usually studied by 
people already familiar with both JavaScript and PHP. 

Creating an XMLHttp Request object 

The key to AJAX is a special object called the XMLHttpRequest object. All 
the major browsers have it, and knowing how to use it in code is what makes 
AJAX work. It's pretty easy to create: 

var request = new XMLHttpRequest ( ) ; 
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Internet Explorer 5 and 6 had an entirely different way of invoking the 
XMLHttpRequest object involving a technology called ActiveX. If you want 
Itp-sppport these older browsers, use one of the libraries mentioned in 
|f\^^er 2 of this minibook. I've decided not to worry about them in this 
introductory chapter. 



This line makes an instance of the XMLHttpRequest object. You'll use meth- 
ods and properties of this object to control a request to the server. 




AJAX is really nothing more than HTTP, the protocol that your browser and 
server quietly use all the time to communicate with each other. You can 
think of an AJAX request like this: Imagine you have a basket with a balloon 
tied to the handle and a long string. As you walk around the city, you can 
release the basket under a particular window and let it rise up. The window 
(server) will put something in the basket, and you can then wind the string 
to bring the basket back down and retrieve the contents. 

Don't worry about all the details in this Table 1-1. 1 describe these things as 
you need them in the text. Also, some of these elements only pertain to asyn- 
chronous connections, so you won't always need them all. 



Table 1-1 



Useful Members of the XMLHttpRequest Object 



Member 



[description 



Basket analogy 



open (protocol , 
URL, 

synchronization) 



Opens up a connection to 
the indicated file on the 
server. 



Stand under a particular window. 



send (parameters ) 



statusText 



Initiates the transaction 
with given parameters 
(or null). 



Release the basket but hang 
onto the string. 



status Returns the HTTP status Check for error codes ("window 

code returned by the server closed," "balloon popped," 
(200 is success). "string broken," or "everything's 

great"). 



Text form of HTTP status. 



Text form of status code. 



responseText 



Text of the transaction's 
response. 



Get the contents of the basket. 



readyState 



Describes current status 
of the transaction (4 is 
complete). 



Is the basket empty, going up, 
coming down, or here and ready 
to get contents? 



onReadyState 
Change 



Event handler. Attach a 
function to this parameter, 
and when the ready 
State changes, the 
function will be called 
automatically. 



What should I do when the state 
of the basket changes? For 
example, should I do something 
when I've gotten the basket 
back? 
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Opening a connection to the server 




Tile XMLHttpRequest object has several useful methods. One of the most 
i|rTOr%2it is the open ( ) method. 

request .open ( "GET" , "beast.txt", false); 



The open ( ) method opens up a connection to the server. As far as the 
server is concerned, this connection is identical to the connection made 
when the user clicks a link or submits a form. The open ( ) method takes the 
following three parameters: 

♦ Request method: The request method describes how the server should 
process the request. The values are identical to the form method values 
described in Chapter 3 of Book V. Typical values are GET and POST. 

♦ A file or program name: The second parameter is the name of a file or 
program on the server. This is usually a program or file in the same 
directory as the current page. 

♦ A synchronization trigger: AJAX can be done in synchronous or asyn- 
chronous mode. (Yea, I know, then it would just be JAX, but stay with me 
here.) The synchronous form is easier to understand, so I use it first. The 
next example (and all the others in this book) will use the asynchronous 
approach. 

For this example, I use the GET mechanism to load a file called beast . txt 
from the server in synchronized mode. 
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Sending the request and parameters 

Once you've opened up a request, you need to pass that request to the 
server. The send ( ) method performs this task. It also provides you a mech- 
anism for sending data to the server. This only makes sense if the request is 
going to a PHP program (or some other program on the server). Since I'm 
just requesting a regular text document, I send the value null to the server. 



request . send (null) ; 



This is a synchronous connection, so the program pauses here until the server 
sends the requested file. If the server never responds, the page will hang. 
(This is exactly why you'll usually use asynchronous connections.) Since this 
is just a test program, assume everything will work OK and motor on. 

Returning to the basket analogy, the send ( ) method releases the basket, 
which floats up to the window. In a synchronous connection, we're assuming 
the basket is filled and comes down automatically. The next step won't 
happen until the basket is back on earth. (But, if something went wrong, the 
next step may never happen, because the basket will never come back.) 
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Checking the status 

iext line of code won't happen until the server passes some sort of 
lse back. Any HTTP request is followed by a numeric code. Normally 
>rowser checks these codes automatically and you don't see them. 
Occasionally you will run across an HTTP error code, like 404 (file not 
found) or 500 (internal server error). If the server was able to respond to the 
request, it will pass a status code of 200. The XMLHttpRequest object has a 
property called status that returns the HTTP status code. If the status is 
200, everything went fine and you can proceed. If the status is some other 
value, some type of error occurred. 



You'll want to make sure that the status of the request is successful before 
you run the code that's dependant upon the request. You can check for all 
the various status codes if you wish, but for this simple example I'm just 
ensuring that the status is 200. 



if (request . status == 200) { 

//we got a response 

alert ( request . responseText ) ; 
} else { 

//something went wrong 

alert ( "Error- " + request . status + ": " + request.statusText) ; 
} // end if 



The request . status property will contain the server response. If this 
value is 200, 1 want to do something with the results. In this case, I simply 
display the text in an alert box. If the request is anything but 200, 1 use the 



Fun with HTTP response codes 



Just like the post office stamping success/error 
messages on your envelope, the server sends 
back status messages with your request. 
You can see all the possible status codes on 
the World Wide Web Consortium's Web site at 
www.w3 .org/Protocols/rfc2616/ 
rf c2616-secl0 .html, but the important 
ones to get you started are as follows: 

i*" 200 = ok: This is a success code. Every- 
thing went okay, and your response has 
been returned. 

V 400 = Bad Request: This is a client 
error code. It means that something went 



wrong on the user side. The request was 
poorly formed and couldn't be understood. 

404 = Not Found: This is a client error 
code. The page the user requested doesn't 
exist or couldn't be found. 

^ 408 = Request Timeout: This is a 
client error code. The server gave up on 
waiting for the user's computer to finish 
making its request. 

500 = Internal Server Error: 

This is a server error code. It means that 
the server had an error and couldn'tfill the 
request. 
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statusText property to determine what went wrong and pass that informa- 
tion to the user in an alert. 



us property is like looking at the basket after it returns. It might 
have the requested data in it, or it might have some sort of note. ("Sorry, the 
window was closed. I couldn't fulfill your request.") There's not much point 
in processing the data if it didn't return successfully. 

Of course, I could do a lot more with the data. If it's already formatted as 
HTML code, I can use the innerHTML DOM tricks described in Book IV to 
display the code in any part of my page. It might also be some other type of 
formatted data (XML or JSON) that I can manipulate with JavaScript and do 
whatever I want with. 



All Together Nou/ — Making the Connection 
Asynchronous 

The synchronous AJAX connection described in the previous section is easy 
to understand, but it has one major drawback. The client's page completely 
stops processing while waiting for a response from the server. This doesn't 
seem like a big problem, but it is. If aliens attack the Web server, it won't 
make the connection, and the rest of the page will never be activated. The 
user's browser will hang indefinitely. In most cases, the user will have to 
shut down the browser process with Ctl+Alt+Del (or the similar procedure 
on other OSs). Obviously, it would be best to prevent this kind of error. 

That's why most AJAX calls use the asynchronous technique. Here's the big 
difference: When you send an asynchronous request, the client keeps on 
processing the rest of the page. When the request is complete, an event han- 
dler processes the event. If the server goes down, the browser will not hang 
(although the page probably won't do what you want). 

In other words, the readyState property is like looking at the basket's 
progress. The basket could be sitting there empty, because you haven't 
begun the process. It could be going up to the window, being filled, coming 
back down, or it could be down and ready to use. You're only concerned 
with the last state, because that means the data is ready. 

I didn't include a figure of the asynchronous version, because to the user, it 
looks exactly the same as the synchronous connection. Be sure to put this 
code on your own server and check it out for yourself. 

The asynchronous version looks exactly the same on the front end, but the 
code is structured a little differently. 
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<!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
ang = "EN" xml : lang = "EN" dir = "ltr"> 



http-equiv=" content-type" content^" text /xml; charset=utf -8 " /> 



<title>asynch.html</title> 
<script type = "text/javascript"> 
//<! [CDATA [ 



var request; //make request a global variable 

function getAJAX ( ) { 

request = new XMLHttpRequest ( ) ; 

request . open ( "GET" , "beast . txt " ) ; 

request . onreadystatechange = checkData; 

request . send(null) ; 
} // end function 



function checkData(){ 

if (request . readyState ==4) { 
// if state is finished 
if (request . status == 200) { 

// and if attempt was successful 
alert (request . responseText) ; 
} // end if 
} // end if 
} // end checkData 

//] ]> 

</script> 

</head> 



<body> 

<hl>Asynchronous AJAX transmission</hl> 
<form action = ""> 
<p> 

<button type = "button" 

onclick = "getAJAX()"> 
Summon the beast of Caerbannogh 
</button> 
</p> 
</f orm> 
</body> 
</html> 



Setting up the program 

The general setup of this program is just like the earlier AJAX example. The 
HTML is a simple button which calls the getAJAX ( ) function. 

The JavaScript code now has two functions. The getAJAX ( ) function sets 
up the request, but a separate function (checkData ( ) ) responds to the 
request. In an asynchronous AJAX model, you typically separate the request 
and the response in different functions. 
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Note that in the JavaScript code, I made the XMLHttpRequest object 
(request) a global variable by declaring it outside any functions. I generally 
king global variables, but it makes sense in this case because I have 
ent functions that require the request object. 



Building the qetAJAK ( ) function 

The getAJAX ( ) function sets up and executes the communication with the 
server. 



function getAJAX(){ 

request = new XMLHttpRequest 0 ; 

request . open ( "GET" , "beast . txt " ) ; 

request . onreadystatechange = checkData; 

request . send (null) ; 
} // end function 



The code in this function is pretty straightforward: 

/. Create the request object. 

The request object is created exactly as it was in the first example 
under "Creating an XMLHttpRequest object" earlier in this chapter. 

2. Call request's open( ) method to open a connection. 

Note that this time I left the synchronous parameter out, which creates 
the (default) asynchronous connection. 

3. Assign an event handler to catch responses. 

You can use event handlers much like the ones in the DOM. In this par- 
ticular case, I'm telling the request object to call a function called 
checkData whenever the state of the request changes. 

You can't easily send a parameter to a function when you call it using this 
particular mechanism. That's why I made request a global variable. 

k. Send the request. 

As before, the send ( ) method begins the process. Since this is now an 
asynchronous connection, the rest of the page will continue to process. 
As soon as the request's state changes (hopefully because there's been a 
successful transfer), the checkData function will be activated. 
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Reading, the response 

Of course, you now need a function to handle the response when it comes 
back from the server. This works by checking the ready state of the response. 
Any HTTP request has a ready state, which is a simple integer value describ- 
ing what state the request is currently in. There are many ready states, but 
the only one we're concerned with is 4, meaning the request is finished and 
ready to process. 
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Ready, set, ready state! 



e property of the request 
object indicates the ready state of the request. 
It has five possible values: 

C" 0 = Uninitialized: The request object 
has been created, but the open ( ) method 
hasn't been called on. 

c" 1 = Loading: The request object has 
been created, the open ( ) method has 
been called, but the send() method 
hasn't been called. 

V 2 = Loaded: The request object has 
been created, the open ( ) method has 
been called, the send ( ) method has been 
called, but the response isn't yet available 
from the server. 

V 3 = Interactive: The request object has 
been created, the open ( ) method has 



been called, the send ( ) method has been 
called, the response has started trickling 
back from the server, but not everything 
has been received yet. 

c" 4 = Completed: The request object has 
been created, the open ( ) method has 
been called, the send( ) method has been 
called, the response has been fully 
received, and the request object is fin- 
ished with all its request/response tasks. 

Each time the readyState property of the 
request changes, the function you map to 
readyStateChanged is called. In a typical 
AJAX program, this will happen four times per 
transaction. There's no point in reading the data 
until the transaction is completed, which will 
happen when readyState is equal to 4. 



The basic strategy for checking a response is to check the ready state in the 
aptly-named request . readyState property. If the ready state is 4, check 
the status code to ensure there's no error. If ready state is 4 and status is 
200, you're in business, so you can process the form. Here's the code: 

function checkData ( ) { 

if (request . readyState == 4) { 
// if state is finished 
if (request . status == 200) { 

// and if attempt was successful 
alert (request . responseText) ; 
} // end if 
} // end if 
} // end checkData 

Once again, you can do anything you want with the text you receive. I'm just 
printing it out, but the data can be incorporated into the page or processed 
in any way you wish. 
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In This Chapter 

W Downloading and including the jQuery library 
C* Using component selectors 
Handling events 



§ My hen building AJAX-enabled Web sites, it can be extremely tedious 
▼ W to write all the JavaScript you need to do even the simplest things. 
A good way around this is to use a JavaScript library. These are simply 
JavaScript code fragments with a number of useful functions built in. 

Many JavaScript libraries are out there, and none of them write the code for 
you. What JavaScript libraries do is make complex JavaScript tasks easier to 
perform. They give you functions to encapsulate complex code into simpler 
function calls. 



JavaScript libraries will vastly increase your productivity and allow you to 
do a lot more fun and impressive things in much less time. They'll also make 
it much easier for you to maintain your code because you don't have to 
rebuild basic functionality. You can concentrate instead on creating a pro- 
gram that solves a particular problem. 

jQuery is a JavaScript library, so to use it, you must be familiar with Java- 
Script and DOM programming. Check out Book IV if you need a refresher on 
these topics. 



Introducing jQuery 

For this minibook, I use the jQuery JavaScript library to enhance JavaScript. 
jQuery has good documentation, high community involvement, and is easy 
to use. 
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JavaScript libraries 



re^re many other JavaScript libraries 
besides jQuery. I chose jQuery for this book 
because of its good documentation, ease of 
use, shallow learning curve, and large follow- 
ing. Afteryou get the hang of jQuery, checkout 
some other JavaScript libraries: 



Prototype (www.prototypejs, 

AJAX and form functions. 



org) 



Script. aculo. us (http:/ /script, 
aculo.us): Add-on to Prototype that 
gives you basic animation and effects. 



Moo Tools (http : / /demos . mootools . 
net): Complete AJAX and user interface 
tools. 

Moo.fx (http: //moofx.mad4milk. 
net): Add-on to Prototype and Moo Tools 
allows you to add special effects to Moo.fx. 

MochiKit (www.mochikit.com): Com- 
plete (but complex) AJAX and user inter- 
face library. 



Getting acquainted With jQuery 

To start with, go to the jQuery Web site at www . j query . com, as shown in 
Figure 2-1. You'll find links to download the library as well as links to the 
documentation, plugins, tutorials, discussion mailing lists, and a blog. The 
Web site tends to change with some frequency, so don't be surprised if you 
go back in a week and it looks completely different. 



Downloading the jQuery library 

The first thing you need to do is download the jQuery library, by following 
these steps: 

/. With a browser, navigate to the jQuery Web site at www . j query . com. 

2. On the jQuery main page under Download jQuery, click the Download 
link. 

This takes you to a wiki-style page containing the different jQuery 
releases. You're presented with three options for downloading: 

• Minified — Gzipped: A version of the file packed in a special 
format called gzip. This makes the file much smaller than it 
normally would be. 

• Uncompressed: Normally formatted JavaScript code. This is the easi- 
est version to read, but it will take a little bit longer for your users to 
download. 

• Packed: Another file format that works with nearly every browser. 
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Learn about the jQuery JavaScript library 

Designers, Developers, Hobbyists, Businesses... 

jQuery is for «v«ryone. tf, Lightweight footprint 

Atifn.lt I 4KB in If. I Ulirif.ilei:::?..! 

The jQuery library is 

suited for many different v CSS3 Compliant 

applications support* CSS 1 -3 and base xPath 



Figure 2-1: 

The jQuery 
Web site 
gives you 
an idea 
what this 
package 
can do. 



History BMknails Tool! Help 



DropBoofos 



jQuery is a new type of JavaScript 
library. 

|Query is a fast, concise. JavaScript Library that simplifies 
how you traverse HTML documents, handle events, 
perform animations, and add Ajax interactions to yourweb 
pages JQuery is designed to change the way that you 
write JavaScript. 

"You start with 10 lines of jQuery that would have been 
20 lines of tedious DOM JavaScript By the time you are 
done it's down to two or three lines and it couldnt get 
any shorter unless it read your mind ' - Dave Methvin 

What does jQuery code look like? The quick and dirty: 



The above code snippet looks for all paragraphs that have 
3 class of 'surprise', adds the class 'ohmy 1 to them, then 
slowly reveals them Click the 'Run' button to see It in 
action! 

Download jQuery 

_ Download jOueiy 1.2.1 | l4kh. Minified and 
I G zipped I 

Great tor production use. 

— | Download tOueiy 1.2.1 |77kl>. Uncompressed) 

LfcJ 0*eat foMesting, learrtng and develciMTient. 




30". off with code \JOM30'! 

This book introduces you to the iQuery 
programming model and guides you 
through the major teatures and 
technique-: you'll need to be productive 
immediately The took anchors each ne 
concept in the tasks youl tackle h 
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jQuery learning resource, Learnino 
jQuerv . share their knowledge, 
experience , and erflhusiasm about 
jQuery to help you get the most from the 
library and to make your web 
applications shine. 





3. For this example, select Minified. 

Most modern browsers can read the gzip version with no problems, but 
occasionally you'll run across an older browser which can't handle this 
format. These browsers are going to have trouble with most of jQuery's 
other features, too. By the time you're working in AJAX, you're going to 
have to assume the user is using a reasonably recent browser. 

4. Download the latest version and save it to your computer somewhere 
you can find it easily. 

If you're using Aptana, all the most popular JavaScript libraries are already 
on your computer, so you probably already have the jQuery library, but you 
may not have the most recent version. 
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Using the documentation 

There are several different helpful documentation options for jQuery. The 
official documentation can be found on the Web site (http : // j query . com); 
it appears in a wiki-style and is constantly updated and improved. There are 
also tutorials, mailing lists, and IRC (chat) channels. One more interesting 
piece of jQuery documentation is Visual jQuery. 
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The official documentation 

|When using the jQuery documentation (http: / /docs . j query . com), the 
oints of interest are the API (Application Programming Interface) ref- 
and the UI (user interface) reference. At first, you'll just use the API, 
but eventually after you get the hang of things, you'll use the UI to start 
adding nifty effects to your site to really make it shine. 



Two places in the jQuery API where you'll probably spend most your time 
starting off are the Attributes and Manipulation sections, followed closely by 
the CSS section after you start dabbling in some effects. Here's some more 
information about each section: 



♦ Attributes: Allows you to set the values of different HTML elements for 
your AJAX calls and functions. 

♦ Manipulation: Allows you to build and remove different page elements 
entirely 

♦ CSS: Allows you to change the look and feel of the page on the fly. 

Becoming familiar with these three sections of the documentation is a good 
way to get up and running with jQuery and the jQuery documentation. After 
you have these sections under your belt, you'll be more comfortable branch- 
ing out into the rest of the documentation. 

Tutorials 

Many tutorials are on the jQuery Web site to get you started. After you 
master these and are eager to dive in and discover more, check out the tuto- 
rials at http : / /docs . j query . com/Tutorials. 

The tutorials are great but can be a little confusing for non-programmers just 
starting out with JavaScript, HTML, and CSS. Luckily for you, you have this 
chapter to take you through the basics of jQuery, but if you need more info, 
these tutorials are a great place to go. 

Visual jQuery 

Visual jQuery is a neat reference tool for the jQuery library. It provides a 
drill-down view of the documentation, which is great for beginners who 
don't know exactly where to find what they're looking for in jQuery. 

With the official documentation, it can take a while to actually remember 
where the thing you're looking for is and then find it. If you click Selectors 
and you're looking for something that's really in the Manipulation section, 
you have to wade through the Selectors page, realize it's not there, and 
guess where it might be. Obviously, this can take valuable development time 
away, get you out of the zone, and can be frustrating. 
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Visual jQuery puts all the documentation on one page in an easy-to-navigate 
view (see Figure 2-2). No reloading the entire page and wading through text 
alize the thing you're looking for is somewhere else. 



Unfortunately Visual jQuery is still at jQuery 1.1.2, whereas jQuery has 
moved all the way on to jQuery 1.2.1, so it's five versions behind (and hasn't 
been updated at the time of this writing). However, the library hasn't 
changed that drastically in the last five versions, so the Visual jQuery docu- 
mentation is still relevant. After you've been using jQuery for a month or so, 
you won't need Visual jQuery because you'll know exactly where everything 
is within the official documentation. 



Getting started With jQuery 



After you download jQuery, you're ready to go. No installation or compila- 
tion is required. 




You can place jQuery in any directory you wish, but since you will frequently 
use jQuery with AJAX and PHP, it makes sense to place jQuery somewhere in 
your main server path, which is usually under xampp/htdocs. (PHP and 
AJAX only work through the server, which requires all files to be in this 
path.) Look at Book VIII, Chapter 1 for more information on configuring your 
server. 



Figure 2-2: 

Visual 
jQuery is a 
useful 
documen- 
tation 
system for 
jQuery. 
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Copy the library you downloaded from the jQuery Web site into the direc- 
tory you'll be using for this chapter's Web site examples. 



ding the library 

You include the library just like you would any other JavaScript code: 

<script type=" text/ javascript " src= " inc/ j query- 1 .2.1 .min . j s " > 

</script> 



This is a special variation of the script tag introduced in Book IV. This tag 
is different because rather than including script directly the script is loaded 
from the indicated JavaScript file. 

Including the JavaScript code does increase page-loading times for your 
users, so don't include the jQuery library if you don't intend to use it. The 
gzip version of the library is quite small. It takes as long to download as a 
small image does. 



Hello World, jQuery-style 

The best way to understand any technology is to put it in action. Figure 2-3 
shows a jQuery version of the famous Hello World program. 



Figure 2-3: 

This page 
uses jQuery 
and AJAXto 
display a 
simple 
greeting. 
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Hello from the easiest AJAX app you'll ever write! 



0 errors / 0 warnings © 



Now: Sunny, 12 C F 
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Aptana's easy setup 



'a, you don't have to set up 3. Choose jQuery as your Ajax library. 

the library. Simply start a new project; to do so: . , .„ . , x , ^ 

' r ' r ' A sample jQuery page is generated that you 

1. Choose Ajax Projects < Ajax Library can use as reference for using or including the 
Project. jQuery library. (Aptana calls this subdirectory 

_ „ . x . lib and places jQuery in yet another subdi- 

2. Save your project with an appropriate „ , . ' , ' 

' r rr r rectory called i Query. 

name. 



If you have looked over Chapter 1 of this minibook, you know that AJAX calls 
can be used to insert text into your pages. You also know that AJAX requires 
a little bit of work to get working correctly The j QueryHello . html page 
uses jQuery to make AJAX incredibly easy. Here's the code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml "> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>j QueryHello .html</title> 
<script type = "text/ javascript" 

src = " jguery-1 . 2 . 3 .min. j s " ></script> 

<script type = "text/javascript"> 
//< ! [CDATA [ 

$ (document) .ready(getAJAX) ; 

function getAJAX(){ 

$ ( "#output" ) . load( "hello. txt" ) 

} 

//] ]> 
</script> 

</head> 

<body> 

<div id = " output "></div> 
</body> 
</html> 
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This code has a number of interesting features: 

♦ It imports jQuery. The first script tag imports the jQuery library 

<script type = "text/ javascript" 

src = " jquery-1 . 2 . 3 .min. js"x/script> 

♦ It contains regular a JavaScript section. The second pair of script 
tags contains the actual JavaScript code. I describe the code in detail in 
the section called "Coding with jQuery" later in this chapter. 



Introducing jQuery 



<script type = "text/javascript"> 
//<! [ CDATA [ 

$ (document) . ready (getAJAX) ; 



;r\o 



function getAJAX ( ) { 

$ ( "#output" ) .load( "hello. txt" ) ; 

} 

//] ]> 
</script> 



♦ It has an empty div named output. This element will contain text 
extracted from a file called hello . txt after the document runs. 

<div id = " output "></div> 

♦ The actual greeting is not in this file. When you run this program, you'll 
see a greeting, but the text of that greeting is not in this page. It will be 
loaded into the output div with an AJAX call. 



Coding With /Query 

The JavaScript code in this section illustrates several primary features of 
j Query 



//<! [CDATA [ 

$ (document) .ready(getAJAX) ; 



function getAJAX ( ) { 

$("#output") . load( "hello. txt") ; 

//]]> 



Here's how it works: 



/. Place code in a CDATA section. 

Like all JavaScript code, this example should go inside a CDATA block to 
ensure the XHTML validator doesn't try to check this code as XHTML. 

2. Specify a function to trigger when the document is ready. 

Most jQuery code is designed to run as soon as the page is finished load- 
ing. The $ (document) . ready ( ) syntax means "when the document is 
ready, run the following function." In this case, I want to run the 
getAJAX function as soon as the document has finished loading. 

$ (document) . ready (getAJAX) ; 

3. Create a function. 

Use an ordinary JavaScript function to perform the AJAX call. 

function getAJAX! ) { 

$ ( "#output" ) . load ( "hello. txt" ) ; 

} 

If. Identify the output div. 
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What if it isn't working' 



vt work, try these solutions: 

v 0 Did you include the jQuery file correctly? 

The most common error is misspelling the 
jQuery library name. 

i<" Is the jQuery library where you actually 
told the page it'd be? Make sure the library 
is where you say it is. 



Is the correct version being used? The 

minified version will usually work, but, if it 
doesn't, try one of the other versions. 

Is JavaScript working at all? Try some 
JavaScript code that doesn't rely on jQuery. 
It's possible that JavaScript is turned off in 
your browser oryou've made a fundamental 
JavaScript error. (Don't feel bad, I still do 
that.) 



jQuery has a great feature for working with parts of the page. It uses most 
of the same selectors you're already familiar with in CSS. $ ( " #output " ) 
is shorthand for document . getElementByld ( " output " ) . See the sec- 
tion called "Selecting elements in jQuery" for more on how to selector 
elements. 

$("#output") .load ("hello.txt") ; 

5. Load a file into the div using AJAX. Book VM 

Chapter 2 

The load ( ) function sets up an AJAX connection with the specified file 

or program and loads the results into the indicated element. In this case, 

I want to load the contents of the hello . txt file into the output div. < c 

5-»3 

$ ( "#output" ) .loadC'hello.txt") ; =" 3 "° 

If you compare this code to the AJAX code in Chapter 1 of this minibook, you 5 -5'<n 
can see right away that jQuery makes AJAX much simpler. If that was all 
jQuery did, that would be exciting enough. jQuery has a lot more surprises 
up its sleeve. 



Putting jQuery to Work 

jQuery is fairly straightforward and easy to use. There are just a few con- 
cepts you need to know to get you started: 

♦ The jQuery node object 

♦ Component selection 

♦ The enhanced event mechanism 



The key to jQuery is the jQuery object. This is a special object that jQuery 
uses to describe any xhtml element. It works a little bit like the classic 
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getElementByid found in ordinary JavaScript, but the jQuery approach 
builds a more interesting and capable object around each element. 



y XHTML element can become a jQuery object. You can turn any 
part of an XHTML page into a jQuery object. 

♦ Multiple selection options. You determine which XHTML element you 
want to turn into a jQuery object using the same general rules as selec- 
tion in CSS. That is, you can identify all the objects of a specific type, all 
the objects with a specific class, or an object with a particular ID. 

♦ jQuery objects have methods. Once you have a jQuery object, you can 
tell it to do things. jQuery objects have many useful methods which 
allow you to manipulate them on the fly, add new event handlers, ani- 
mate them, load AJAX content, and much more. 

♦ jQuery events can be chained. Each jQuery method returns another 
jQuery object, so you can chain your commands together (write a com- 
plex command that does several things to one element in one line). 

Most of jQuery's functionality is handled in the following format: 

$ ( [component selector] ) . function ( [optional function 
variables] ) ; 



Selecting elements in jQuery 



If you want a JavaScript program to interact with part of your Web page, 
you have to somehow select the element from the DOM (Document Object 
Model) hierarchy. The most common way to do this in plain JavaScript is 
with code like this: 

var myThing = document . getElementByid (" elementld" ) ; 
jQuery allows you to do the same thing in a much shorter syntax, 
var myThing = $ ( " #elementld" ) ; 
Here's how this line works: 

/. Create a JavaScript variable. 

You can place a jQuery object in an ordinary JavaScript variable. 

2. The dollar sign indicates a jQuery object. 

Use the dollar sign symbol followed by a pair of parentheses to indicate 
you are constructing a jQuery object. 

3. Use a CSS-style selector to indicate which object you are referring to. 
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In CSS syntax, you can use #myThing to indicate an element with the 
myThing ID. You can also use p to indicate all paragraphs, or .myClass 
,dicate all elements with the myClass class defined. 



resulting object can do more than a regular DOM object. 

Because the $ function creates a special jQuery object, your resulting 
variable can do anything jQuery objects can do. 

The jQuery code is shorter and easier to read, is more flexible, and creates a 
more powerful object than the JavaScript original. 



Seiectinq att elements of a specific type 

You may find that you want to do something interesting with all the elements 
of a particular type of tag. As an example, look at the modList . html pro- 
gram in Figure 2-4. 

Although there is a border element around the list, the page has no CSS! The 
border was added dynamically through jQuery. 

There's another surprise: Click on any list item, and the contents of that item 
appear in a dialog box, as shown in Figure 2-5. 

Book VII 



Figure 2-4: 

Each ele- 
ment of this 
list has a 
border. 
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Figure 2-5: 

The list 
items all 
now have 
a click() 
method. 
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These features can be added in plain JavaScript, but they would be tedious. 
jQuery makes it very easy to manipulate all the elements of a particular type. 
Here's the code for modList .html: 

<!DOCTYPE html PUBLIC " -/ /W3C/ /DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>modList .html</title> 

<script type = " text/ javascript " 

src = " jguery-1 . 2 . 3 .min. j s " ></script> 

<script type = "text/javascript"> 
//<! [CDATA [ 

$ (document) . ready (modifyListltems) ; 

function modifyListltems ( ) { 
var items = $("li"); 

items . ess ( "border " , "lpx red solid"); 
items. click(sayValue) ; 
} // end modifyListltems 

function sayValue ( ) { 

alert ($ (this) .html ( ) ) ; 
} // end sayValue 



//] ]> 
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</script> 
</head> 

ow items</hl> 

<ul> 

<li>uno</li> 

<li>dos</li> 

<li>tres</li> 

<li>quatro</li> 

<li>sinco</li> 
</ul> 

</body> 
</html> 

The overall structure isn't too hard to see: 

♦ There is no CSS style. No internal or external CSS is defined for this 
page. Any CSS is generated dynamically by the JavaScript/jQuery code. 

♦ The XHTML document contains a list. For this example, I add some 
functionality to all the li elements on the page, but I could just as 
easily add functionality to any other element — all p tags or headers, 
for example. 

♦ The jQuery library is included. The jQuery library adds the functional- 
ity required for this project. 

♦ The modifyListitems ( ) method is called when the document is 
ready. Like most jQuery programs, much of the action happens once the 
page is ready for processing. In this case, I call the modifyListitems ( ) 
method as soon as the DOM object is ready. (See the upcoming section, 
"Modifying the list items," for details on how to write this function.) 

♦ The sayvalue ( ) method will be used to indicate the text associated 
with a specific element. This function is used to output the value of an 
element. Its use is explained in the next section. 

Modifying the list items 

The main purpose of the jQuery code in this page is to illustrate how to 
change the appearance and behavior of all instances of a particular element 
(in this case, all li elements). 

function modifyListitems ( ) { 
var items = $ ("li") ; 

items . ess ( "border " , "lpx red solid"); 
items. click(sayValue) ; 
} // end modifyListitems 

function sayValue { ) { 

alert ($ (this) .html () ) ; 
} // end sayValue 
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eate a jQuery object called items. 

e the $ ( " li " ) selector to refer to every li element on the page. All 
li items will now be encased in a special variable called items. 

var items = 

2. Add a CSS style to items. 

The ess ( ) function lets you apply a CSS style to all the elements associ- 
ated with this jQuery object. The CSS style requires two parameters: a 
style rule and its associated value. In this case, I apply a thin red border 
to all list items. 



items . ess ( "border" , 

Add a click event to items. 



" lpx red solid" ) ; 



The click ( ) method allows you to call a specified function whenever 
any element in the items object is clicked. In effect, this adds an event 
handler to all the list items with one line of code. In this particular case, 
I run the sayValue ( ) function if any li is clicked. 

items . click (sayValue) ; 

Note that when I called the sayValue ( ) function from within the jQuery 
click events, I left off the parentheses. It won't work with the parentheses. 

6. The sayValue ( ) function returns the text associated with the current 
element. 

$ (this) refers to the current element. The .html ( ) function returns 
the code associated with that item. In the case of the li elements, the 
text of the li will be repeated. 

function sayValue ( ) { 

alert ($ (this) .html() ) ; 
} // end sayValue 

You don't have to call an outside function from your event if you don't want 
to. If you know for sure that the event on the element in question is the only 
place you'll be doing whatever it is you'll be doing, you can simply insert the 
function right there during the event bind: 

$ ( " #clickButton" ) . click ( function ( ) { 
//insert your functionality here 

}) ; 

You can use ordinary JavaScript code to achieve all these effects, but once 
you understand how to use jQuery, you'll find it extremely easy to manipu- 
late all the elements of a specific type in your page. 
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ou'll want to perform some sort of task with all the elements having a 
w:lass name. It's surprising that JavaScript doesn't have an easy way 
fls. Fortunately, jQuery overcomes this oversight quite easily. Figure 2-6 
illustrates with a simple program called showSurprise . html. 



showSurprise.html - Mozilla Firefox 



Figure 2-6: 

The page 
looks 
simple — 
click for a 
surprise. 
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Some of the page elements are hidden when the page is initially loaded. 
When you click on the indicated heading, these hidden elements are 
revealed, as shown in Figure 2-7. 



jQuery makes it quite simple to hide and show page elements. In this case, 
all the elements of the surprise class are hidden when the page loads, and 
revealed when the user clicks on the indicated h2 element. 



The code reveals all: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http : //www.w3 . org/1999/xhtml"> 
<head> 

<meta http-equiv=" content-type" content^" text/xml; charset=utf-8 " /> 
<title>showSurprise .html</title> 
<script type = "text/javascript" 

src = " jguery-1 . 2 . 3 .min. j s " ></script> 
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Figure 2-7: 

The hidden 
features are 
revealed. 
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<script type = "text/javascript"> 
//<! [CDATA [ 

$ (document) .ready(setupTrigger) ; 

function setupTrigger ( ) { 

$ ( " . surprise " ) . hide ( ) ; 

$ ( " .trigger" ) . click (showSurprise) ; 
} // end setupTrigger 

function showSurprise ( ) { 
$ ( " . surprise" ) . show( ) ; 
} // end showSurprise 

//]]> 
</script> 
</head> 

<body> 

<hl>Show Surprise</hl> 
<h2 class = " trigger "> 

Click me to see hidden parts of the page 
</h2> 

<p class = " surprise "> 

Surprise! Now I'm visible! 
</p> 



<h2 class 
</body> 
</html> 



" surprise " >Isn ' t jQuery cool?</h2> 
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Building this program requires a few new jQuery tricks, but nothing terribly 
difficult: 



jQuery as usual. 



The jQuery library makes the task of identifying elements by class name 
much easier than standard JavaScript. 

<script type = "text/ javascript" 

src = " jquery-1 . 2 . 3 .min. js"x/script> 

2. Create the XHTML framework. 

I use two classes in the XHTML. The trigger class is applied to the h2 
element that will make the hidden features appear when clicked. The 
surprise class is applied to any element that will begin life hidden and 
appear on demand. 

<body> 

<hl>Show Surprise</hl> 
<h2 class = "trigger"> 

Click me to see hidden parts of the page 
</h2> 

<p class = "surprise"> 

Surprise! Now I'm visible! 
</p> 

<h2 class = "surprise">Isn ' t jQuery cool?</h2> 
</body> Book VII 

3. Call the setupTrigger ( ) function when the page is ready. Chapter 2 

This function will do all the necessary setup. 

$ (document ). ready ( setupTrigger ) ; § 

- « 3 

If. In setupTrigger ( ) , hide all elements with the surprise class. — £o 3 

The ( " . surprise " ) selector is used to make a jQuery object contain- j| 
ing all the elements with the surprise class attached. (Check Book II to 
see that CSS uses the same technique to indicate class elements.) The 
hide ( ) method makes each element of the class invisible. Since this 
code is called when the document is ready, the user will not initially see 
any surprise elements on the screen. 

function setupTrigger () { 

$ ( " . surprise" ) .hide ( ) ; 

$ ( " . trigger" ) . click (showSurprise) ; 
} / / end setupTrigger 

5. Attach a click event to the trigger class. 

The trigger class is selected using the class selection technique. In 
this case, the click ( ) method is used to indicate the showSurprise ( ) 
method should run whenever the user clicks on an element of the 
trigger class. 

$ ( " . trigger" ) . click (showSurprise) ; 
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When the showSurprise ( ) method is activated, it selects all elements 
ith the surprise class attached, and makes them visible. 




function showSurprise () { 
$ ( " . surprise" ) . show( ) ; 
} // end showSurprise 



If you prefer, you can use the following variation to make the surprise 
elements toggle between visible and invisible: 

function showSurprise 0 { 

$ ( " . surprise" ) . toggle ( ) ; 
} // end showSurprise 



Managing Events through jQuery 

You can easily add an event handler to a jQuery object using the click ( ) 
method. This is not the only event handler that jQuery recognizes. You can 
add the following events to any jQuery object: 

♦ Change: The content of the element changes. 

♦ Click: The user has clicked on the element. 

♦ Dblclick: The user has double-clicked on the element. 

♦ Focus: The user has selected the element. 

♦ Keydown: The user has pressed a key while the element has the focus. 

♦ Hover: The mouse is over the element, but has not been clicked. 

♦ Mousedown: A mouse button has been pressed while the element has 
the focus. 

♦ Select: The user has selected text in a text-style input. 

These are the most commonly used events, but not all. Check the jQuery 
documentation for other events you can trap. 

Using bind to bind events to elements 

You can use the jQuery bind function to attach events to elements, as 
shown here: 

$ ( " #clickButton" ) . bind ( " click" , changeColors ) ; 

When you call a function through the bind event, you can't include parenthe- 
ses after the function to be called. 





Managing Events through /Query 757 



Just like when attaching events by their name (see the preceding section), 
you can insert your function during the event binding rather than calling an 
^y|^rngifunction if you want: 

$ ( " #clickButton" ) .bind( "click" , function( ) { 
alert ( "here" ) ; 

}) ; 

Unbinding 

You can unbind event functions from elements if you want: 

$ ( "#rollDiv" ) .unbind( ) ; 

This particular version of unbind (with empty parentheses) unbinds all 
events attached to the specified element. If there's a specific function you 
want to unbind, you can specify it: 

$ ( " #rollDiv" ) . unbind ( "mouseover" ) ; 

If you've bound events to an element through some sort of nonspecific bind- 
ing (like if you've bound events to a whole class or by tag names), attempt- 
ing to unbind the event from just one sub-element of the element group 
won't work: Book VII 

Chapter 2 

$ ( " #clickButton" ) .bind( "click" , functionf ) { 

//this does absolutely nothing in this case 
$ ( "#rollDiv" ) . unbind ( ) ; 



} ) ; s»3 



< . 

B) 



O 00 ° 

//ultimate j Query bind = 5 £. 

$("*") . mouseover ( changeColors ) ; .g "5 <n 



Check out eventComparrison .php on the CD to see all these examples 
side-by-side in working code. 
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Chapter 3: Animating With /'Query 

DropBooks — 

In This Chapter 

W Adding jQuery effects 

V Getting familiar with the jQuery user interface 
C* Working with Interface Elements for jQuery 

f 

■ n this chapter, you work with some slightly more advanced jQuery selec- 
5 tors, as well as discover how to use neat effects and other user Interface 
Elements, such as draggable items and custom dialog boxes. 

/'Query's Special Effects 

After you're comfortable with the jQuery library, you can start doing fun 
and flashy things that really add a little zing to your Web site. When used 
correctly, effects can take your site from an amateur-looking homepage to a 
professionally done Web site. 

Predefined animations 

All the jQuery effects really come down to showing and hiding elements in 
slightly different ways. Showing and hiding elements gives you a perfect way 
to make custom pop-ups, drop-down navigation menus, and many other 
nifty-looking page elements. The effects are broken down into four different 
categories: 

4- Show: Make a hidden element appear. 

♦ Slide: The element slides into place. 

♦ Fade: Change the transparency. 

♦ Custom animations: Move the element along a specified path. 

The most basic form of showing and hiding elements is done through the 
Show effect. Simply indicate the hidden page element you wish to show and 
tell it to show itself by entering the following code: 

$ ( " #hiddenElement " ) . show ( ) ; 

You can hide it again with the hide function: 



$ ( " #visibleElement " ) . hide ( ) 
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You can indicate the speed at which the element should be shown or hidden, 
as well as implement a callback function to be executed after the showing 
ing is complete. You indicate speed in increments of slow, medium, 
or thousandths of a second (1000 = 1 second): 




$ ( "p" ) . show ( 1000 , anyFunctionf ) ) ; 

The callback function doesn't always run when it's supposed to, and most 
of the time, it actually executes before the show or hide, so don't rely on 
this too much. You can skip it, if you prefer: 



$("p" ) .show (1000) 



You can even leave the timing out if you're okay with the default timing: 




$ ( "p" ) . show ( ) ; 

With the show ( ) and hide ( ) functions, if you specify a length of time for 
the animation to execute, the Slide and Fade effects combine to form one 
graceful effect. 

All the other effects follow the same format as the Show and Hide effects, 
except that with the other elements, you must specify a speed. All the possi- 
ble effects are 



♦ slideDown: The element appears to slide down into place. 

♦ slideUp: The element appears to slide up into place. 

♦ slideToggle: The element slides into place if it was invisible or slides 
away if it's currently visible. 

♦ f adein: The element transitions from transparent to opaque. 

♦ f adeOut: The element transitions from opaque to transparent. 

♦ f adeTo: This effect requires you to specify not only the speed but the 
opacity to stop at. 



You can do some really nifty things with these effects. Take a look at Figure 3-1, 
which uses special selectors to show the section you hover over and to hide 
all other sections: 



<head> 

<meta http-equiv="Content-type" content^" text/html; charset=utf -8 " /> 
<title>helloAJAX</title> 
<style type=" text/ess "> 
div{ 

border: solid black; 
border-width: 2px 4px; 
padding-left: 15px; 
width: 400px; 
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h2{ 

text-decoration: underline; 




<div class="section" id="home"> 
<h2 id="homeHeader">Home</h2> 

<p>Welcome to Fake Website Inc. LLC. We hope you find everything you need 
here . </p> 
</div> 

<div class= 11 section" id="news"> 
<h2 id="newsHeader">News</h2> 

<p>We have recently added a FAQ section to this page!</p> 
</div> 

<div class="section" id="faq"> 
<h2 id="faqHeader">FAQ</h2> 
<p>Q. Is this a FAQ section?</p> 

<p>A. Yes, it most certainly is! Thanks for asking!</p> 

</div> 

< script type=" text/ javascript " src= " inc/ j query- 1 .2.1 .min. js "></script> 
<script type= "text/ javascript "> 
$ (" . section p" ) .hide ( ) ; 



$ ( " . section h2 " ) .mouseover { function ( ) { 

$("#" + $ (this) .attr( "id" ) + " ~ p" ) .slideDown(3 00) ; 
$("h2:not(#" + $(this) .attrC'id") + " ~ p) ~ p" ) .hide (300 ) ; 

>); 
</script> 
</body> 
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Q Is this a FAQ section? 

A Yes, it most certainly isl Thanks for asking! 
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Figure 3-1: 

The con- 
tents of each 
box pop up 
when you 
hover over 
the titles. 
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Several advanced selector functions are here. The tilde (~) selects all sib- 
lings after the specified element. The this keyword specifies the current 

8nt that triggered the function. The mot selector excludes all elements 
I by the selector. 

After hiding all paragraphs with the class type of "section" , the jQuery 
code adds a mouseover event to each " section" header (the h2s). When 
this event is triggered, the code finds all paragraph siblings following the 
triggering h2 and shows them. It then finds all h2 elements that aren't the 
triggering h2 element and hides the paragraph siblings that follow them. 



Custom animations 

You can create your own custom effects. Any style that takes a numeric 
value can be manipulated through the animate function. 

The animate ( ) function takes four values: 




♦ Parameters that indicate the elements to be animated, 
■f The intended duration of the animation. 

♦ Easing specifies the style of the animation (this requires a plugin). 

Easing indicates how an animation will begin and end. Some animations 
start slowly to imply the element has mass. 

♦ Callback specifies a function to be executed upon completion of ani- 
mation for each element. 



animate ( { "width" 



'100"}, 1000, "linear", someFuntion ( ) ) 



CSS selectors are indicated using the standard dom style, so border width 
would be borderwidth. (Check Book IV, Chapter 5 for more on referring to 
CSS elements through the dom.) 

Easing has two built-in functions that don't require plugins: linear and 
swing. It appears that swing starts slow, speeds up, and then slows down 
again; and linear is steady throughout. 

You can specify an absolute value to animate to or add/subtract values 
with -= and +=. 

This program expands the width of divs when they're rolled over by the 
user. With some clever CSS backgrounds, these functions can turn some 
simple HTML and a few lines of JavaScript into a worm race (see Figure 3-2): 



<head> 

<meta http-equiv="Content-type" content^" text /html; charset=utf-8 " /> 
<title>animate</title> 
<style type="text/css"> 
div{ 
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background: #FFF url ( "worm. gif " ) right no-repeat; 
width: 50px; 
height: 25px; 



<body> 

<hl>Worm Race!</hl> 

<p>Roll your cursor wildly randomly over the worms to spur them along... </p> 

<divx/div> 

<divx/div> 

<divx/div> 

<p>Rolled over worms: <span id="counter">0</span> times. </p> 
<script type=" text/ javascript " src= " inc/ j query- 1 . 2 . 1 .min. js "></script> 
<script type="text/ javascript"> 

var counter = 0 ; 

function countUp ( ) { 
counter++; 

$ ( " #counter " ) . text ( counter ) ; 

} 

$ ( "div" ) .mouseover ( function ( ) { 

$ (this) . animate ({ "width" : "+=10"}, 500, "linear", countUp ()) ; 

}) ; 
</script> 
</body> 



Figure 3-2: 

It's a worm - 
racing 
page! Who 
doesn't love 
worm 
racing? 
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11 your cursor wildly randomly over the worms to spur them along 



hollc-d over worms: 73 times. 



Book VII 
Chapter 3 



© a> 

CD = 

J in 



Interfacing With the Official Ul Ptugin 




Beyond these animations, there are also many plugins available on the 
jQuery Web site. Also, a few more effects functions allow you to access the 
laaiiaa^tion queue, as well as to completely stop animations in their tracks. 



Interfacing u/ith the Official Ul Piuqin 

jQuery's official user interface (Ul) library is somewhat incomplete. As 
of this writing, many of the demos on the Web site don't work. Probably 
the most promising of them all seems to be the draggable ( ) and 
droppable ( ) functions. 

I describe how to use the drag and drop features, as well as the custom 
dialog boxes and table sorting, but then I move on to the much more robust, 
well-documented, and coded plugin — Interface Elements (see the section 
"Interface Elements for jQuery," later in this chapter). 

bmwinq md dropping 

If you were building an online store, it'd be nice to allow the user to pick 
what item he wanted and drop it into the shopping cart. You could do this 
with jQuery through the draggable and droppable Ul functions. 



The draggabte () function 

You need the ui . mouse . j s, ui . draggable . j s, and ui . draggable . 
ext . j s libraries to implement draggable functionalities. You should down- 
load these from http : / /ui . j query . com and include them in your file, 
like this: 

< script type=" text/ javascript " src= " inc/ui .mouse . js"x/script> 

<script type=" text/ javascript " src= " inc/ui . draggable . j s " ></script> 

< script type=" text/ javascript " src= " inc/ui . draggable . ext . js "></ script> 

Making an element draggable is as easy as specifying an element(s) with a 
selector and then making it draggable: 

$ ( " . dragMe " ) . draggable ( ) ; 

You can specify many different things when making an element draggable. 
The full list of these options is available at http : / /docs . j query . com/ 
UI /Draggables / draggablettoptions. 

Options are placed inside the parentheses after the draggable function call 
and are separated by commas: 

$ ( " . draggableElements " ) . draggable ( { 
opacity: .5, 
start : function ( ) { 
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$ ( "#statusText" ) . append ( "dragging Item") ; 

} , 

|""N^_ ^^^^ _ _ I _ stop: function(){ 

J | JTj rj V\ ^ $( "#statusText" ) .appendt "dragged Item"); 

■""^ 1 w I— / W W I XV-» $(this) .draggableDisableO ; 

$ (this) . fadeOut (400) ; 

} 

}) ; 

The helper option is very commonly used. This allows you to specify 
another element entirely as the element that attaches to the cursor when 
you begin dragging the target element. This option also allows you to clone 
the target element and use that as the object being dragged: 

$ ( " . dragMe " ) . draggable ( { 
helper: "clone", 

}) ; 

You can also create an HTML element on the fly and return that to be used 
as the helper: 

$ ( " . dragMe " ) . draggable ( { 
helper: function () { 

return $ (document . createElement ( ' div ' ) ) . ess ( { 
'background' : ' url (worm. gif ) ', 
'width' : ' 50px' , 
' height ' : ' 2 5px ' 
} ) . appendTo ( "body" ) [ 0 ] ; 



dropping. With the droppable () function 

The counterpart to draggable is droppable. If you don't have a draggable 
element, there's no point in having a droppable one. 

With droppable, you specify the element to be made droppable, as well as 
which draggable elements it'll accept: 

$ ( " . dragTarget " ) . droppable ( { 
accept : " . dragMe " , 

}) ; 

Just like draggable, droppable has many different options you can spec- 
ify. Among the most useful of these is the drop option, which fires twice 
each time something is dropped into it or fires once if only an object's clone 
is dropped into it. The way to fix this is to set the greedy option to True: 

$ ( " . dragTarget " ) . droppable ( { 
accept : " . dragMe " , 
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greedy: true, 
drop : function ( ) { 

alert ( "dropped! " ) 




For a full list of options, see http : / /docs . jquery.com/UI/Droppables/ 
droppable#options. 

Playing the Catch the Worms game 

Listing 3-1 shows a little game that makes three worms crawl out onto the 
screen and allows you to drag and drop them into a bucket (see Figure 3-3). 
This sort of drag-and-drop effect would be fine for shopping carts or any 
page where you're adding items to a collection. 



Listing 3-1: The Catch the Worms Game 

<head> 

<meta http-equiv="Content-type" content^" text/html; charset=utf -8 " /> 
<title>draggable</title> 
<style type=" text /ess" > 
. dragMe { 

cursor: move; 

position: absolute; 

top: Opx; 

left: Opx; 

background- image: url ( "worm. gif " ) ; 
width: 5 Opx; 
height: 25px; 



. dragTarget { 

position: absolute; 
top: 5 Opx; 
left: 500px; 
width: lOOpx; 
height: lOOpx; 
background : #bbb ; 
border: 3px inset black; 

} 

</style> 
</head> 
<body> 

<hl>Worm Catcher ! </hl> 

<p id="wormsCaught">Catch the worms, and place them in the worm bucket. </p> 
<div class="dragTarget" id="wormBucket">Worm Bucket. Put Worms Here!</div> 
<div class= 11 dragMe" id="worml"></div> 
<div class="dragMe" id="worm2"></div> 
<div class="dragMe" id="worm3"></div> 



< script type= " text / j avascript " src= 

<script type= " text / j avascript " src= 

<script type= " text / j avascript " src= 

<script type= " text / j avascript " src= 

<script type= " text / j avascript " src= 

< script type= " text / j avascript " src= 



inc/ j query- 1 .2.1 .min. js "></script> 
inc /ui. mouse. js"x/script> 
inc/ui . draggable . j s " ></script> 
inc/ui . draggable . ext . js "></script> 
inc/ui . droppable . j s " ></script> 
inc/ui . droppable . ext . js "></script> 
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<script type="text/ javascript"> 
$ ( " . dragMe " ) . each ( function ( ) { 

*("#" + this. id) .animate ({"top" : Math. ceil (Math. random! ) * 400)}, 
tion: 1000, queue: false}); 

+ this . id) . animate ({" left " : Math. ceil (Math. random ( ) * 400)}, {duration: 
queue: false} ) ; 




var wormsCaught = 0 ; 
var whichWorm = null; 



$ ( " . dragTarget " ) . droppable ( { 
accept : " . dragMe " , 
greedy: true, 
drop: function(){ 

$("#" + whichWorm) . draggableDisable( ) . appendTo ( this) .ess ({ "left" : 
Math . random ( ) * 50 + "px", "top": Math. random ( ) * 75 + "px"}); 
$ ( "#wormsCaught" ) . append ( "<br />You caught a worm!"); 



wormsCaught++ ; 

if (wormsCaught == 3 ) { 

$(" #wormsCaught" ). append ( "<br /><em>You caught all of the 
worms ! < / em> " ) ; 
} 

} 

}) ; 

$ ( " . dragMe " ) . draggabl e ( { 
start: function) ){ 

whichWorm = $ ( this) . attr ( 11 id" ) ; Chapter3 



Sorting With the table sorter 



jQuery comes with a table sorter that helps you enhance your XHTML 
tables. 

The tablesorter ( ) function can be attached to any table to make it 
sortable by its header rows. It requires the inclusion of two extra files, the 
JavaScript plugin, and a CSS theme. 

Making a basic table 

The code for making a table sortable is surprisingly short and concise: 

$ ( " ttableToBeSorted" ) . tablesorter ( ) ; 

Specify the element for the table sorter to be applied to and call the function. 
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Figure 3-3: 

In this 
program, 
you pick up 
the worms 
and drop 
them on 
a div. 



;tory Bookmarks Tools tlelp 

■jOf htt p://localhost/XFD/xfd7.3f dragDrop.html 



using 



Catcher! 



Catch the worms, and place them in the worm bucket. 
You caught a worml 



Worm Bucket 
PutWo-^^ 

Here! 



0= L 0 errors I 1 warning Q 



You need to include the library and theme for this to work properly: 

<link rel= " stylesheet " href = " inc/ themes /flora/ flora . all . ess " 

type= " text/ess " media= " screen" title="Flora (Default) "> 
<script src= " inc/ui . tablesorter . j s " ></script> 

If you have multiple tables on the page, you can apply the tablesorter ( ) 
function to the tablesorter class. 

Your table has to have the class of tablesorter in order for the theme to 
be applied to it. 

See Listing 3-2 for an example of two sortable tables. A sortable table is 
shown in Figure 3-4. 




Sorting options 

There are currently 11 different options for the tablesorter ( ) function. 
Two of them are pretty useful on a regular basis. The empty tablesorter ( ) 
function call does its job pretty well so that you probably won't even need 
options, but these two are actually pretty useful. 
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Figure 3-4: 

Click on 
any table 
heading to 
sort by that 
value. 
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Scott 
Haipert 



Regional Managei ot Dundei Mittlm Scranton 



Sales Representative 



Hi x_ 0 



sortList 

The sortList option allows you to specify columns to be sorted by default. 
You pass this option a two-dimension array (multidimensional arrays are 
described in Chapter 5 in Book V): 



$ ( " . tablesorter " ) . tablesorter ( { 

sortList: [[0, 1], [1, 1], [2, 

}) ; 



0] ] 
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The first number in each array specifies the column — starting with zero 
(0) for the first column — you want the sort to be forced on. The second 
number can be either zero (0) or one (1) and specifies the sort direction. 
The sort direction can be set to either 0 for ascending or 1 for descending. 

Make sure to use camel-casing for this option. 

sortforce 

The sortForce option's functionality is a little bit more subtle. It prevents 
the table from appearing to have a random secondary sort when the user's 
sorting. When applied to a column, it forces that column to sort secondarily 
when the user sorts another column. 
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For example, if you put a sortForce on the last name column and the user 
sorted by the first name column, a secondary sort would be placed on the 
me column so that if you had eight people with the same first name, 
st names would be in alphabetical order: 



$ ( " . tablesorter " ) . tablesorter ( { 

sortForce: [[0, 1], [1, 1], [2, 0]] 

}) ; 



This options syntax is nearly identical to sortList, and the sub-arrays 
function the same way. 




This function is a little buggy. Be careful when you use it to make sure that 
it's functioning as you expect. Sometimes, the force overrides the user- 
selected sort. 



Listing 3-2: Two Tables Sorted by the Table Sorter 



<table id="scrubsCharacters" class="tablesorter"> 




<thead> 






<tr> 






<th>First Name</th> 






<th>Last Name</th> 






<th>Age</th> 







<th>Title</th> 

</tr> 
</thead> 
<tbody> 

<tr> 

<td>Robert</td> 

<td>Kelso</td> 

<td>65</td> 

<td>Chief of Medicine</td> 
</tr> 
<tr> 

<td>John</td> 
<td>Dorian< / td> 

<td>32</td> 

<td>Attending physic ian</td> 
</tr> 
<tr> 

<td>Christopher</td> 

<td>Turk</td> 

<td>31</td> 

<td>Attending surgeon</td> 
</tr> 
<tr> 

<td>Elliot</td> 

<td>Reid</td> 

<td>30</td> 

<td>Private Practice Physician</td> 
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of f iceCharacters" class= " tables or ter 11 > 

thead> 
<tr> 

<th>First Name</th> 
<th>Last Name</th> 
<th>Age</th> 
<th>Position</th> 
</tr> 
</thead> 
<tbody> 
<tr> 

<td>Michael< / td> 
<td>Scott</td> 
<td>43</td> 

<td>Regional Manager of Dunder Mifflin Scranton</td> 
</tr> 
<tr> 

<td>Pam</td> 

<td>Beesly</td> 

<td>28</td> 

<td>Receptionist</td> 
</tr> 
<tr> 

<td>Jim</td> 
<td>Halpert</td> 
<td>28</td> 

<td>Sales Representative</td> 
</tr> Chapter 3 

< / tbody> 
</table> 

<script type=" text/ javascript " src=" inc/j query- 1 . 2 . 1 .min. js "></script> 

<link rel=" stylesheet" href =" inc/themes/f lora/flora . all . ess " type="text/css" S. > 

media=" screen" title="Flora (Default) "> 
<script src=" inc/ui . tablesorter . j s "></script> 
<script type="text/ javascript"> 

$ ( " . tablesorter " ) . tablesorter ( { .3 la 

sortList: [[0, 1], [1, 1], [2, 0]] 

}); 
</script> 



Book VII 



-.3 
c S. 

CD 



Creating dialog boxes 

Custom dialog boxes have long been a desire for Web developers. Who 
wants that nasty alert box that comes standard with browsers? With the 
dialog function, you can turn any page element (normally a div) into a 
dialog box. 



Figure 3-5 shows a custom dialog box. 
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Figure 3-5: 

This dialog 
box was 
created 
from a 
special div 
in the page. 



I'm a custom alert box! 



□D D 
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Basic dialog box 

The basics you need to know about the dialog function are the creation 
function, the open function, and the close function. With these three func- 
tions, you can completely replace the standard browser dialog box and alert 
pop-ups. 

For the dialog ( ) function, in addition to including the jQuery library, you 
need to include the dialog, the dimensions, the mouse, the draggable and 
resizable libraries, and a theme style package: 

<link rel= " stylesheet " href = " inc/ themes /flora /flora . all . ess " 

type= " text/ess " media=" screen" title="Flora (Default) "> 
<script type="text/ javascript" 

src= " inc/ j query. dimensions . j s " ></script> 
<script type="text/ javascript" 

src= " inc/ui . dialog . j s " ></script> 
<script type="text/ javascript" 

src= " inc/ui . resizable . j s "></script> 
<script type="text/ javascript" 

src= " inc/ui .mouse . j s "></script> 
<script type="text/ javascript" 

src= " inc/ui . draggable . j s "></script> 
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dialog ( ) 

Making a custom dialog box is as simple as creating a div, giving it the class 
by your theme (default is flora), giving it a title, and then calling 
og ( ) function on it: 



<div id="alertBox" class= " flora " title="Alert ! "> 

I'm a custom alert box! 
< /div> 



<script type= " text/ j avascript " > 

$ ( " #alertBox" ) . dialog ( ) ,- 
</script> 

Don't forget to apply the correct class to the div. Also, make sure you put the 
title in there, or else the title bar of the dialog box will be empty. 

dialogClose ( ) 

This is how you close the dialog box: 

$ ( " #yourDiv " ) . dialogClose ( ) 

You can call this from an event within another block of JavaScript or j Query, 
or even just through a button: 

Book VII 

<div id= " alertBox" class= " flora " title= "Alert !" > Chapter3 

<p>I'm a custom alert box!</p> 

<pxbutton id="hideAlert" type= "button" >Ok</buttonx/p> 
</div> 

$ ( "#hideAlert " ) . click ( function ( ) {$ ( "#alertBox" ) .dialogClose ( ) 



}) ; 

You might also consider calling this function on the dialog box immediately 
after you create the dialog so that it doesn't begin visible to the user. 

Use the button option to specify OK, Cancel, Save, and other buttons. 

dialogOpen ( ) 

You trigger the appearance of the dialog box with the following line: 

$ ( " #yourDiv" ) . dialogOpen ( ) 

You can call this from an event within another block of JavaScript or jQuery, 
or even with a button: 

<pxbutton id= " showAlert " type= "button" >Show Alert! 
</buttonx/p> 

$ ( " #showAlert " ) . click ( function (){$(" #alertBox" ) . dialogOpen ( ) } 



CD = 

J in 



77^5 Interfacing With the Official Ul Plugin 



DropBooKS 



Dialog box options 

Query provides many options for customizing your dialog box. A few of 
re as follows. 




buttons 

With the buttons option, you can create custom buttons for your dialog box: 

$ ( " #alertBox" ) . dialog ( { 
buttons: { 

' ok ' : function ( ) { $ ( " ttalertBox" ) . dialogClose ( ) ; } , 
' cancel ' : 

function (){$(" ttalertBox" ) . dialogClose ( ) ; } 
} 

}) ; 

As of this writing, there's a bug with the buttons option. You're supposed 
to be able to use this keyword instead of having to re-specify the div. 
Perhaps this will be fixed soon. 

draggable 

With the draggable option, you can specify with a Boolean (True or 
False; don't surround with quotes) whether the dialog box can be moved 
around. As of this writing, this option doesn't actually work, though, but at 
least it defaults to True. 

position 

This function allows you to specify a position where your dialog box pops 
up. It'll take 'center', 'top', 'right', 'bottom', or 'left' values and 
allows you to choose where the dialog box should appear on the page: 

$ ( " #alertBox" ) . dialog ( { 
position: 'top' 

}) ; 



Other options 

There are many other options for the dialog box, including: 



♦ height 

♦ maxHeight 

♦ minHeight 

♦ maxWidth 

♦ minWidth 



♦ resizable 
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♦ title 




to these, there are also callback methods. 



Listing 3-3 shows a page that allows you to click a button to view a custom 
dialog box, which can be closed by clicking either OK or Cancel. 

Listing 3-3: A Custom Dialog Box 

<div id="alertBox" class="flora" title= "Alert ! "> 

<p>I'm a custom alert box!</p> 
</div> 

<pxbutton id="showAlert" type="button">Show Alert ! </buttonx/p> 
<script type=" text/ javascript " src= " inc/ j query- 1 . 2 . 1 .min. js "></script> 
<link rel = " stylesheet" href ="inc/themes/flora/f lora. all . ess " type= 11 text/ess" 

media=" screen" title="Flora (Default) "> 
<script type=" text /javascript " src= " inc/ j query .dimensions . js "></script> 
<script type=" text/ javascript " src= " inc/ui . dialog. j s "></script> 
<script type=" text/ javascript " src = " inc/ui . resizable . j s "></script> 
<script type=" text/ javascript " src= " inc/ui .mouse . js "></script> 
< script type=" text/ javascript " src = " inc/ui . draggable .js"x/script> 




<script type= "text/ javascript "> 
$ ( "#alertBox" ) . dialog ( { 
height: 200, 
position: 1 top 1 , 
buttons : { 

' ok 1 : function (){$(" #alertBox" ) . dialogClose ( ) ; } , 
' cancel 1 : function (){$(" #alertBox" ) .dialogClose ( ) ; } 

} 

>); 

$ ( "#alertBox" ) .dialogClose ( ) ; 

$ ( "#showAlert" ) . click) function ( ) {$ ( "#alertBox" ) . dialogOpen( ) } ) ; 
</script> 

Unlike a normal alert box (the kind you build with regular JavaScript), this 
dialog box doesn't actually cancel any action when closed by clicking 
Cancel. 
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Interface Elements for jQuery 

When you're ready to really get into making some swell user interfaces for 
jQuery, you might want to move away from the standard effects library and 
check out some plugins, like Interface Elements. 

You can access Interface Elements' documentation and demos at 
http : / / interface . eyecon . ro. This is also where you'll download the 
library. Just like with the jQuery standard UI library, clicking the Download 
link takes you to a page that allows you to select which UI effects you desire 
and then to download the library packages for those effects. You can also 
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just download everything by clicking the link under the Download heading in 
the navigation pane on the left side of the page. 

oad everything as one big package and unzip it into the directory 
building your site from. All you have to do to implement these 
elements for any page, no matter which effect you want, is include the 
interface . j s file in your page, as shown here: 
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<script type="text/ javascript" src= " inc/interf acel . 2 / 
interface . j s " ></ script> 




Make sure the src attribute in your <script> tag points to the location of 
your interface . j s file. I placed mine under inc/interf acel .21 , but 
you may have placed yours somewhere else. 



Getting to knout the Interface Elements 

Most of the Interface Elements functions follow the same sort of structure. 
I'll take a bit of an in-depth look at the sorting function and then give you an 
overview of two other major ones. 



Super dragging and dropping itiith the sortables interface 

The sortables interface is extremely easy to implement. It's sort of a super 
drag-and-drop. Like most of the Interface Elements, a basic function can take 
options and trigger an event the elements controlled by the event change. 

Basic sorting 

The sortable interface requires that you have containers (which are drop- 
pables) and items (which are draggables). After you've set up these, you 
specify the container class as Sortable and then specify the item class as 
the element that the container class can accept: 

<div class= " container " > 

<p>container l</p> 

<div class= " item" >the item</div> 
</div> 

<div class= " container " > 

<p>container 2</p> 
</div> 

<script type="text/ javascript"> 
$ ( ' . container ' ) . Sortable ( { 
accept : ' item ' 

}) ; 
</script> 
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Options 

Myst of the Interface Elements functions take options. A few of the major 
or the sortables function are as follows: 



♦ accept: This one's required. Use it to specify the class names of the 
sortable items. 

activeclass: Use this to specify the CSS class to be used for all the 
valid drop points of a sortable item whenever an item is being dragged 
for sorting. 

hoverclass: Use this to specify the CSS class to be used for a valid 
drop point when a sortable item is hovering over it while being dragged 
for sorting. 

helperclass: Use this to specify the CSS class to be used for the exact 
spot a sortable item will be placed in when it's being dragged for sorting. 
This is sort of like a target area; it shows exactly where the item would 
fall if you released it at any moment during a drag. 

opacity: This should be a number between zero (0) and one (1), where 
1 is completely visible and 0 is completely transparent. For instance, . 5 
would be half invisible and would look ghostlike. 

ghosting: This is a Boolean. If you set it to True, the current drop 
target for the sortable item will contain a copy of the element being 
dragged. Be careful when using this because it's buggy and may not 
work properly. When I used it, upon releasing my dragged item, it and its 
ghost both disappeared. 

containment: This confines the element to its parent container. The 
only acceptable value here is 1 parent 1 . Its implementation is slightly 
buggy. 

axis: This confines the element's draggability to one axis or the other. It 
accepts 'vertically' or ' horizontally '. Although it confines the 
element being dragged to only one axis, it can't confine your mouse, and 
therefore, it doesn't really change the functionality of where you can 
drop the element — it only appears to. Your mouse cursor decides 
where the element gets dropped. 
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Don't forget to surround the string values for the options with quotes (either 
single or double are accepted). It's also best to remember to separate 
options with commas (,) instead of semi-colons (;). 

If your active, hover, and/or helper classes seem to not be working, 
check the order of your rules in your style sheet. Because they cascade, if 
you put the active rule after the hover rule, the hover rule will be over- 
written by the active rule and thus be rendered useless. This can be 
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extremely frustrating if you don't realize what's going on because it just 
silently fails. So, make sure you place the rules in the order that the options 
itten above and in the documentation. (This is the order: normal 
rule, active, hover, and finally helper.) 




Note that these options are not camel-cased. So, helperclass really is 
helperclass and not helperclass. Camel-casing will break these 
options. 



onchange 

In order for this to be useful as a user input device, you have to be able to 
detect which elements were changed. Sortable allows you to detect this with 
the onchange option. 

The onchange option returns an array of the container elements that were 
changed by their ID. 

Make sure you have a unique ID for every container and item. Otherwise, 
this option won't work. It won't give you any errors if you don't have IDs; it 
just won't do anything. This is the worst kind of failure because it's not 
immediately apparent that it isn't working, and it'll leave you very frustrated. 

The basic onchange function looks like this: 
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onchange: function (arrayOfChangedContainers) {} 



You can name the function arrayOfChangedContainers or anything you 
want. In the documentation, they call the function " ser " . This is an array of 
the container elements that were changed. Normally, this array will have a 
length of either one or two because you'll either be dragging an item from 
one container to another or within one container. 



You can serialize the container into a $_REQUEST-friendly hash through the 
$ . SortSerialize ( ) function in conjunction with the .hash() function: 

onchange: function ( ser ) { 
var changedltems = " " ; 
for(var i=0; i<ser . length; i++) { 

changedltems += ($. SortSerialize (ser [i] )). hash; 

changedltems += "&" 

} 

alert (changedltems) ; 

} 
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The $ . SortSerialize ( ) and . hash function combination returns a string 
containing the container element's IDs, as well as the item element's IDs. It'll 



containerl [ ] =iteml&container2 [ ] = item3&container2 = iteiu2& 

This allows you to send the new order for each element to the server for 
saving. Just replace the alert with a call to an AJAX function that saves the 
new order. See Chapter 1 and Chapter 4 of this minibook for more on send- 
ing, receiving, and processing requests. 

Listing 3-4 shows a sample program that allows you to arrange four tasks 
over a three-day period. It could easily be expanded to allow for adding 
custom tasks and removing unwanted tasks. 

Listing 3-4: The Day Planner 



<meta http-equiv="Content-type" content^" text/html; charset=utf -8 " /> 
<title>sortables</title> 
<style type=" text/ess "> 
. task{ 

border: 3px dotted #090 ; 
background-color: #AFA; 
width: 200px; 
padding: Opx lOpx; 



. taskDrag{ 

border: 3px dashed #900 ; 

} 

.day{ 

border: 2px solid #009; 
background-color: #AAF; 
width: 250px; 
padding: lOpx lOpx; 
float: left; 



} 

</style> 
</head> 
<body> 

<hl>Day Planner</hl> 
<div id="monday" class="day"> 
<h2>Monday</h2> 

<div id="laundry" class="task"> 

<h3 class= " taskTitle">Laundry</h3> 

<p class="taskDescription">Do all of the laundry for the week.</p> 
</div> 

<div id="food" class="task"> 




:head> 



. taskHover{ 

background-color: #F00; 



(continued) 
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Listing 3-4 (continued) 



<h3 class= " taskTitle">Make Food</h3> 

<p class="taskDescription">Make all of the Food for the week and freeze 



</div> 

<div id="tuesday" class="day"> 
<h2 >Tuesday< /h2 > 

<div id="shopping" class="task"> 

<h3 class="taskTitle">Grocery Shopping</h3> 

<p class="taskDescription">Go grocery shopping for the week.</p> 
</div> 
</div> 

<div id= "Wednesday" class="day"> 
<h2>Wednesday</h2> 
<div id="randr" class=" task"> 

<h3 class= " taskTi tie " >R &amp ; R< /h3 > 

<p class="taskDescription">Sit around, play video games and read.</p> 



<script type=" text/ javascript " src= " inc/j query- 1 .2.1 .min. js "></script> 
<script type=" text /javascript" src= " inc / int er f acel. 2 / inter f ace. js"></ script > 
<scr ipt type= " text / j avascript " > 
$( 1 .day' ) .Sortable({ 



accept : 1 task 1 , 
helperclass : 1 taskDrag ' , 
hoverclass : 1 taskHover ' , 
opacity: 1 . 5 1 , 
onchange: function(ser) { 

var changedltems = ""; 

for (var i = 0; i < ser. length; { 

changedltems += serialize (ser [i] ) + "&"; 

} 

save (changedltems) ; 

} 



function serialize (theContainer) { 

serial = $ . SortSerialize (theContainer) ; 
return serial. hash; 

} 

function save (changedltems) { 
$ . a j ax ( { 



type: "POST", 
url : "saveSchedule.php" , 
data : changedltems, 
success: function (msg) { 

alert ("Data Saved: 11 + msg) ; 

} 




>-</p> 

div> 



< / div> 



< / di v> 



}); 



}); 



</script> 



The day planner is shown in Figure 3-6. 
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Figure 3-6: 

The user 
can drag the 
tasks to a 
different 
day! 



Monday 



Gror ery Shopping 

Go grocery shopping for the 
week 

Make Food 

Make all of the Food for the 
week and freeze it. 



Tuesday 



Do all of the laundry for the 
week 



Wednesday 




I Data Saved: 

• 'i 1) monday; shopping 

2) monday: food 

3) tuesday: laundry 



0 errors / 0 warnings Q 




See Chapter 4 in this minibook for more on sending and receiving AJAX 
requests with jQuery. This program has just enough of a back-end setup to 
make it look like it's working, although it doesn't really do anything. It could 
be easily modified to save to a text file or a database. The current code in 
saveSchedule .php, which is just enough to give some sort of meaningful 
response, consists of two f oreach loops and a print statement: 

<? 

$i = 1; 



foreach($_POST as $day => $task) { 
foreach($task as $task) { 

print $i . ") " . $day . ' 
$i++; 



. $task . "\n" 



} 



} 

?> 
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See Book V, Chapter 3 for more on request/response processing with PHP 
and Book V, Chapter 5 for more on f oreach loops. 

Every container and item needs to have its own ID. Otherwise, you get subtle 
errors without any error messages. It's possible you could go for quite some 
time without realizing you forgot an ID on an element. 



Interface Elements for jQuery 



Setectabtes 

heselectables function allows you to select items by dragging a box 
o%Sd them. It can return an array of the selected items that you can use in 
i k /flAX function to save the chosen items however you wish. 

For a more in-depth look at an Interface Elements function, see the "Getting 
to know the Interface Elements" section, earlier in this chapter. This is a 
basic overview to get you started. 



Basic setectabtes 

This function takes a page element (probably a div) and denotes it as being 
selectable — the child elements specified by the function's mandatory 
accept option are selectable (see Figure 3-7): 

<head> 

<style type= " text/ess " > 
. item{ 

width: lOOpx; 
height: lOOpx; 
background-color: black; 
border: lpx solid white; 

} 

. selectedltem{ 

background-color: blue; 
border: lpx solid #888; 

} 

. selectionHelper { 

border: 3px double red; 

} 

</style> 

</head> 

<body> 

<div id= " container " > 

<div id="iteml" class= " item" ></div> 

<div id="item2" class= " item" ></div> 

<div id="item3" class= " item" ></div> 
</div> 

<script type="text/ javascript" src= " inc/ jquery- 

1.2.1. min . j s " >< / scr ipt> 
<script type="text/ javascript" 

src= " inc / inter facel . 2 /interface . j s "></script> 
<script type="text/ javascript"> 
$ ( ' #container ' ) . Selectable ( { 
accept : ' item' , 
selectedclass : ' selectedltem' , 
helperclass : 'selectionHelper' 

}) ; 
</script> 
</body> 
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Figure 3-7: 

These items 
can be 
individually 
selected. 




^ 0 http://localhost/XFD/xfd7.3/selectables.html 



iii (J 0 errors / 0 warnings Q 




Although accept is the only required option, this function appears to not be 
working if you don't specify at least the selectedclass option. 

Hold down the Ctrl or Shift key to help with multiple item selection. 
Setectabtes options 

The selectables have very few options, as follows: 

♦ accept: This option is mandatory. It specifies the classes within the 
parent element that are actually selectable. 

♦ selectedclass: This might as well be mandatory. It specifies the class 
that will be applied to the selected items. 

♦ helperclass: This specifies the CSS rule for the box that you use to 
select items. 

♦ opacity: This specifies the opacity for the box that you use to select 
items. 

♦ onselect: This is the function that's called upon selection completion. 
It receives an array of the selection elements that can be used to call an 
AJAX function, as in the sortables example, above. 
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See http : / /interface . eyecon . ro/ docs /select for more information 
.about this function. 

\cikitig a slider 

One of my favorite Interface Elements is the slider. With a little work, it can 
function like a radio button group. 

For a more in-depth look at an Interface Elements function, see the "Getting 
to know Interface Elements" section, earlier in this chapter. This is a basic 
overview to get you started. 



Basic slider 

The basic slider consists of a container element, which functions as the 
track that the indicator slides on, and an indicator that slides along the track 
(see Figure 3-8). Listing 3-5 shows a sample of a basic slider. 



Listing 3-5: The Basic Slider 

<head> 

<title>slider</title> 
<style type= " text /ess " > 
#track{ 

top: 2 0px; 
left: lOpx; 
height: lOOpx; 
width: 2 0px; 
background-color: #00F; 



. indicator! 

height: 2 5px; 
width: 2 0px; 

background-color: black; 

} 

</style> 
</head> 
<body> 

<div id=" track" > 

<div id= " indicator " class="indicator"x/div> 
</div> 

<script type="text/ javascript" src= " inc/ jquery- 

1.2.1. min . j s " ></ scr ipt> 
<script type="text/ javascript" 

src= " inc / inter facel . 2 /interface . j s "></script> 
<script type="text/ javascript"> 
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$ ( "#track" ) .Slider ( { 

accept: '.indicator' 




Figure 3-8: 

This item 
is a little 
slider. 



File Edit View History Bookmarks look H_elp 



I 



^ Q http:,/locahost,XFD/xfd7.3/sl>der.html 



ij: ^ 0 errors / G warnings © 



You can have multiple indicators on the same track. You can also go horizon- 
tal instead of vertical. I suppose you could have a horizontal and vertical 
slider, but unless done very carefully, that could be a usability nightmare. 
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SiMer options 

Unlike other Interface Elements functions, the slider function's options do 
use camel-casing. Don't forget to camel case them (onSlide ( ) instead of 

onslide ( ) ). 

The slider has very few options, which are as follows: 



♦ accept: This option is mandatory. It accepts a CSS class, indicating the 
indicators (what you move along the slider track) inside the slider. 



♦ fractions: This is a number (don't put it inside quotes). This divides 
the slider along into fractions based on the number you specify. Note 
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that it starts counting at 0, so 3 is really 4, 4 is 5, and so on. Think of it as 
making however many slices you indicate into the slider. 



Slide: This is a callback function. It executes while you're sliding the 
dicator. It returns four parameters belonging to the indicator at any 
given moment: 




• x-percentage 

• y-percentage 

• x-coordinate 

• y-coordinate 

♦ onChange: This is a callback function. It executes when you stop sliding 
the indicator. It returns the final result of the same four parameters 
returned on the onSlide ( ) function. 

♦ values: This allows you to specify where the indicator(s) should start 
on the slider bar. It accepts an array of arrays (one inner array for each 
indicator's start position): 

[[20,20], [50,100] ] 

♦ restricted: This requires a Boolean value (don't surround it with 
quotes). If restricted is set to True and there are multiple indicators, 
the indicators won't pass each other on the slider bar. 

See http: / / interface . eyecon . ro /docs /slider for more information 
about this function. 
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In This Chapter 

W Summarizing XML 

Generating an XML response 
Traversing XML with JavaScript 
Introducing JSON 



J\ JAX can be used to send information to the client from the server. 
v \ Elsewhere in Book VII, I concentrate on using complete XHTML code 
that can be integrated directly into the page. There's another powerful way 
to work with AJAX. You can pass data around in a specialized format and let 
the JavaScript/j Query code manipulate the data on the client. The data is 
usually packed in XML format, but JSON is an increasingly popular tech- 
nique. Both systems are introduced in this chapter. 

Working M'th XML 

extensible Markup Language (XML) is an extremely useful tool for sending 
and receiving data. XML data is easy to read and understand, even by 
humans. It's not too difficult to write programs that can read XML data, and 
the structure of the data is preserved by the tags. When you create your 
own XML format, you define custom tags to describe the data as follows: 

<person> 
<name> 

<f irst>John</ f irst> 
<middle>L</middle> 
<last>Doe</last> 
</name> 
<age>25</age> 
<gender>Male< /gender> 
</person> 

XML is nothing new if you've read any other part of this book. XHTML is 
simply a form of HTML that also follows XML rules. The new idea is this: 
Rather than having to conform to somebody else's list of tags, you can 
invent your own and transmit information using your custom XML syntax. 
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These tags can be parsed with JavaScript and generated with PHP fairly easily. 

XML element must have an opening and closing tag. (This is just like 
1TML rule.) 

XML is a little bulky. Just look at the previous example: You have to use all 
those tags just to get that little bit of data back to the browser. See the sec- 
tion "Introducing JSON," later in this chapter, for an alternative to XML. 

Generating XML With PHP 

When you send an AJAX request to the server, the server then generates a 
response. This response can be plain text, an HTML fragment, or some code 
generated by a PHP program. If you're using PHP, you have to decide whether 
that response is an XML response or a plain XHTML response. If you want 
PHP to generate XML, you have to set the content type of the response. 
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Setting the content type 

The first thing you need to do to send an XML response is to set the content 
type in your response header. When the browser receives the response, it 
checks the header to see what kind of data you're sending so that it can have 
a better idea of what to do with the data. Here's how you let the browser 
know that you're sending XML: 




<? header (' Content-Type : text/xml'),- ?> 

You must set the content type at the beginning of your response generation 
page. If you don't set the content type explicitly, the content type will be 
automatically set to text /html. The browser will try to read the data as 
XHTML, when the data should be read as XML. 

If you forget to set the content type, you'll get weird errors in Internet 
Explorer. Firefox works just fine whether or not you set the content type. 

The XML declaration 

Besides specifying your content type in the header, you also need to declare 
your document type as XML in the text of the response. The tag for declaring 
the document type as XML is sort of like the tag for declaring the document 
type as HTML: 




<?xml version= " 1 . 0 " encoding= "UTF- 



standalone= "yes " ?> 



The document type declaration for XML is similar to the one for XHTML 
because XHTML is a subset of XML 
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This xml declaration specifies the XML version as 1.0 and the encoding as 
utf-8, and that the XML document is a standalone, with no external DTD 
nt type declaration). You don't need to worry about what all this 
cause it never changes throughout all the XML documents you gen- 
erate. Just copy and paste this into your header. 




Note the PHP-friendly < ? ?> tags surrounding the XML declaration. Those 
make it impossible to place this tag inside a PHP document without putting 
it inside a print or echo statement surrounded with single quotes ( 1 ): 

print '<?xml version= " 1 . 0 " encoding= "UTF-8 " standalone= 
"yes " ?>' ; 



See Book V, Chapter 2 for more on print and echo statements in PHP. 



Populating the XML document With data 

Generating your XML with PHP is exactly like generating text with PHP. Use 
print and echo statements to print your XML response to be sent back to 
the browser: 



print <<<HERE 
<person> 

<name> Book VII 

<f irst>$f name</f irst> 



<middle>$mname< /middle> 
<last>$lname</last> 



Chapter 4 



</name> 



to CO 

<age>$age</age> g ™ 

<gender>$gender</gender> s! — 

</person> en <n 

HERE ; " - 



ST 



See Book V, Chapter 2 for more on print and heredocs with PHP. 




I can't stress this enough. You absolutely must have one almighty, super 
one-to-rule-them-all element that contains all other elements. Note that in 
the XML code in this section, I've used one super-person element that con- 
tains all the other elements. If I was to add a new person, I'd then have to 



surround the two separate person elements with one super-people element. 
If you don't set it up this way, you'll get a parse error. 



Handling, the XML response With jQuery 

Because XHTML and XML are nearly identical at their roots, JavaScript can 
parse XML just like it parses XHTML. 



Working With XML 



Ja 



The easiest way to parse the XML is by tag name. You can read more about 
accessing page elements by tag name in Book IV, Chapter 5, but the basic 
ript and jQuery code for this is as follows: 



JavaScript 

document . getElementsByTagName ( "desiredTagNameHere " ) ,- 
jQuery 

$ ( "desiredTagNameHere" ) ; 



Getting the XML from the server 

The PHP page that generates the XML and the HTML page that uses this XML 
need a way to talk to each other. That's where AJAX comes in. You can see 
how to send and receive a basic text request with AJAX in Chapter 1 in this 
minibook. In this section, you see how to use jQuery to do the same thing 
and then parse the XML. 

Sending the request With jQuery 

The code in Chapter 1 of this minibook that you used to send the request to 
the PHP page was a horrible, confusing, ridiculous monster compared to the 
code I'm about to show you: 

$ .ajax( { 

type: "POST", 
url : "page .php" , 
dataType: "xml", 
success: pageUpdate 

}) ; 

This little bit of jQuery packs a wallop. It replaces the request object cre- 
ation required in normal JavaScript, as well as replaces the code that does 
the request generating and sending. You can specify many options with this 
function, but the important ones are as follows: 

♦ type: This specifies what type of request you want to use. Possible 
types include 

• "POST" 

• " GET " 

• " PUT " 

• " DELETE " 

If the type option isn't specified, it defaults to "GET", so the main 
reason to use this is if you want to use " POST " (which you should make 
a habit of doing). 
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bJhir^f "j u^fWa nt to insert an external 
HTML page directly into the current HTML page 
and have no reason to process anything before 
the insertion? 

jQuery has an extremely convenient function 
for you! Check out the jQuery load ( ) func- 
tion. With it, you specify a page element to have 
the foreign HTML inserted into and then call the 
load() function, into which you pass a 
parameter indicating the page you wish to be 
loaded: 



$ ( "#localElement" ) .load 
( " f oreignHtml .php" ) ; 

You can pass data through to the foreign page 
if it needs data in order to generate a dynamic 
response. You can also specify a callbackfunc- 
tion to be executed upon the completion of the 
load. Check out http : / /docs . j query . 
com/Aj ax/ load#urldatacallback 
for more information. 



♦ url: This specifies the page you want to send the request to. In most 
cases, this is the PHP page that you're using to process the request and 
generate a response. You can also specify a page in XML, JavaScript, 
ASP, or a Java resource. 

♦ dataType: This specifies the type of data you're expecting to receive 
back in the response. In Chapter 1 of this minibook, you received text 
with a responseText object when processing the plain text response. 
In plain JavaScript, a sister object, responseXML, is used to process 
XML responses, so you can traverse the response with dom (Document 
Object Model) techniques. Here, you can specify which of these you 
want jQuery to use. If you don't specify this here, jQuery usually figures 
it out for itself. The different values you can specify are 

xml " 

html " 

script " 

j son" 

j sonp " 

text " 



Specifying " script " will override your type specification with 
you tried to use " POST " . 



GET " if 



♦ error: This specifies the function to be called if the request fails. The 
function will automatically be passed through three parameters: The 
XMLHttpRequest, an error string, and optionally (if one occurred) an 
exception object. 
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♦ success: This specifies the function to be called if the request suc- 
ceeds. The function will automatically be passed through two parame- 
rs: the data returned by the response (formatted according to your 
ecification in the dataType option) and the status. 



complete: This specifies a function to be called upon completion, 
whether or not the request was successful. 



Receiving the response With /'Query 

In Chapter 1 of this minibook, you can see how you'd normally handle the 
response with JavaScript. Make sure the response is finished and successful, 
and then access the response. Finally, you can parse and do something with it. 

jQuery vastly simplifies this. In the previous section, you can see how to 
specify a function to be called upon a successful response (as well as an 
error response). 

This function can be placed right there in the send function: 

$ .ajax( { 

url : "page .php" , 

success: pageUpdate = function (data, statusText) { 
}, 

error: errorHandler = function (request , error) { 
} 

}) ; 

Or it can be referenced from the success option in the send function: 



$ .ajax( { 

url : "page .php" , 
success: pageUpdate, 
error: errorHandler 



function pageUpdate (data, statusText) { 



} 





Remember not to put the parentheses on the function reference for the suc- 
cess, error, or completion options in the send function. So, if you want to 
call the pageUpdate ( ) function on success, you'd put "pageUpdate" and 
not "pageUpdate ( ) ". 

The XML, text, or whatever it is that you happened to request from the server 
is contained in that "data" parameter in the success function. You can name 
this parameter anything you want, like "theXML" or "responseText" or 
" j osh" . 
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Parsing the XML 

After you have your XML, you're ready to make the AJAX magic happen. 



important thing you need to know right off is how to access the 
XML with the selector techniques. The easiest way to handle the XML is by 
tag name. In Chapter 3 of this minibook, you can see how to access page ele- 
ments by tag name with jQuery. For instance, if you wanted to access all the 
paragraph (<p>) tags in the page, you could do so like this: 



$("P") 



Accessing the returned XML elements by tag name is almost exactly the 
same. In your success function, access the tag name that you want by using 
the tag name function and passing on the XML object you want it to search 
through instead of the current page: 



function testUpdate (data, 
$ ( "desiredTag" , data) 

} 



statusText) { 



Retrieving a table of data and printing it to the screen is a common task. 
Normally, you send some search terms to a PHP page. The PHP program 
would perform some SQL magic on those terms, generate some XML repre- 
senting the data it retrieved from the database, and then send the data back 
to the browser as an XML response. Then, you'd take the XML response and 
parse it, turning it into your table. 

Here's an example of code where the PHP page sends the XML back to the 
browser: 

<?php 

header (' Content-Type : text/xml 1 ); 
print <<<HERE 

<?xml version=" 1 . 0 " encoding="utf -8 " ?> 

<characters> 

<character> 

<f irst>Robert</f irst> 

<last>Kelso</last> 

<age>65</age> 

<occupation>Chief of Medicine</occupation> 
</character> 
<character> 

<f irst>John</f irst> 

<last>Dorian</last> 

<age>32</age> 

<occupation> At tending physic ian</occupation> 
</character> 
<character> 

<f irst>Christopher</f irst> 

<last>Turk</last> 

<age>31</age> 

<occupation> At tending surgeon</occupation> 
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</character> 
<character> 

<f irst>Elliot</f irst> 

Sst>Reid</last> 
e>30</age> 

<occupation>Private Practice Physician</occupation> 
</character> 
</characters> 
HERE; 
?> 



Here's the page that turns the XML into a table and displays it to the user: 

<div id="response"x/div> 

<button id="getCharacters">Get The Characters ! </button> 

<script type=" text/ javascript " src= " inc / j query- 1 . 2 . 1 .min. js "x/script> 
<link rel=" stylesheet" href =" inc/themes/f lora/flora . all . ess " type= " text/ess " 

media=" screen" title="Flora (Default) "> 
<script src="inc/ui . tablesorter . js"x/script> 
<script type="text/ javascript"> 
$ ( "#getCharacters" ) . click ( function ( ) { 
$ .ajax( { 

type : " POST " , 

url : "characters .php" , 

dataType: "xml", 

success: pageUpdate, 

error: pageError = function (request, error) { 
alert (error) ; 

}, 

complete: pageComplete = function(){ 
alert ( "done" ) ; 

} 

}) 

}) ; 

function pageUpdate (data, statusText) { 

var character = $( "character" , data); 

var theTable = '<table class="tablesorter"xthead><tr><td>First 
Name< / tdxtd>Last 

Name</tdxtd>Age</tdxtd>Occupation</tdx/trx/theadxtbody> ' ; 
j Query. each (character, function (i, val){ 

theTable += "<tr>"; 

attr = $ (character [i] ). children () ; 

jQuery . each (attr , functionfii, val){ 

theTable += "<td>" + $ (attr [ii] ). text ( ) + "</td>"; 

}) ; 

theTable += "</tr>"; 

}) ; 

theTable += "</table>"; 

$ ( "#response" ) .html (theTable) ; 

$ ( " . tablesorter" ) . tablesorter ( ) ; 

} 

</script> 



Figure 4-1 shows this program in action, translating the XML response to a 
data query to an XHTML table. 
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The data in 
this table 
came from 
an XML 
response. 



File Edit View History Bookmarks Tools hjelp 

Q http://loca[host/XFD/Yfd7.4icharacters.hl 







Robert 


Kelso 65 


Chief of Medicine 






32 


.■■-.tte .y physician 


Christopher 


Turk 


31 


Attending surgeon 


Elliot 


Reid 


30 


Private Practice Physician 



Get I lie Chaiaaer;.! 




You can use the j Query . each ( ) function to easily iterate through an object 
or array. See http : / /docs . j query . com/Utilities/ j Query . each# 
obj ectcallback for more info on this function and http : / /docs . 
j query . com/Utilities for more on other useful utility functions. 
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XML is easy to understand; you can look at it and know exactly what you're 
dealing with, but it's still just a bit bloated. You have to have at least two 
tags (a tag opener and close) for one piece of data. 
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It'd be nice if there was a leaner way to describe data without having to 
use this fat, chunky data structure. Well there is — it's JavaScript Object 
Notation (JSON). It's been gaining popularity over the last few years, espe- 
cially as AJAX has become more prevalent. 



OverView of JSON 

JSON is basically just object-oriented JavaScript, which is an enhanced form 
of multidimensional JavaScript arrays: 



var character = { 

"first" : "John" 
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"last" : "Dorian", 
"age" : 32, 
occupation" : "Attending Physician" 



Looks familiar, doesn't it? It's almost the exact same syntax you've been 
using for all jQuery functions: 



$ .ajax( { 

url: "somePage.php" , 
dataType : " text " , 
success: pageUpdate 

}) ; 



You can access the different elements of your JSON data with ease. Say you 
wanted to access the first name index of the character array in the same 
JSON data. You could do this with JavaScript syntax, like so: 

character . first 

It doesn't get any simpler than that. You can even iterate through the data as 
you would with a JavaScript array: 

jQuery . each (character , function () { 
alert (this) ; 

}) ; 

The above code sample would alert the value of each array index, so you'd 
get four alert boxes ("John", "Dorian", "32", and "Attending Physician") while 
it cycled through the array and alerted what it found. 

See Book IV, Chapter 4 for more on working with JavaScript objects and 
arrays. 

If you give JSON a chance, I guarantee you'll find it easier to use than XML 
after you get used to it. 



Usinq JSON With PHP 

As of version 5.2, PHP can natively encode and decode JSON, which means 
that there's nothing extra you have to do to be able to use JSON instead of 
XML. JSON also speeds up your AJAX because it makes your already-small 
data calls even leaner. 



You only need to know two new PHP functions to use JSON with PHP 
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json_encode ( ) 

Yqju can use the j son_encode ( ) function in PHP to generate JSON to be 
to the browser in response to an AJAX request. 



First, create your array as normal with PHP: 

$jd => array ( 

"first" => "John", 
"last" => "Dorian", 
"age" => 32, 

"occupation" => "Attending Physician"); 
Then, use the j son_encode ( ) function to turn the PHP array into JSON: 

$jd = json_encode ($jd) ; 

After it's encoded, it could be printed to the page the same way you'd print 
XML or text to be sent back to the browser as the response to an AJAX 
request. Check out http : / /us . php . net /manual / en/ function . 
j son-encode . php for more on the j son_encode ( ) function. 



json_decode () 

You use the j son_decode ( ) function in PHP to generate a PHP object or Book VII 

associative array from JSON: Chapter 4 

$jd = json_decode ($jd) ; _ 



This code takes the JSON that you encoded (in the j son_encode ( ) exam- 
ple) and turns it into a PHP object: 

$jd = json_decode ($jd, true); 

The next line takes the JSON that you encoded (in the j son_encode ( ) 
example) and turns it right back into a PHP associative array. 

Check out http : / /us . php . net /manual /en /function . j son-decode . 
php for more on j son_decode ( ) . 

Usinq JSON With AJAX 

There are some differences when using JSON with AJAX instead of XML. You 
need to send the request a little bit differently, and parsing the response is 
much simpler. 
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Sending the request 

When sending the request with j Query, you can specify that you're expecting 
ive back JSON by setting the dataType to " j son " : 

$.ajax({ 

url : "somePage.php" , 
dataType: "json", 
success: pageUpdate 

}) ; 

This lets jQuery know that you expect to get back JSON instead of XML or 
just plain text. This way, you can just jump right into your JSON processing. 

Receiving the response 

If you're using jQuery and you specify the dataType as JSON, you don't 
have to do anything special when you receive the response before you can 
dive in and start using the data. 

If you're not using jQuery, you'll need to evaluate the text returned from the 
PHP in the response: 

var theJSON = eval ( ' ( ' + response . responseText + ')'); 

Evaluating the responseText will take it from some plain text and turn it 
into JSON recognized by JavaScript. 

Generating tables utith JSON 

At the end of the "Parsing the XML" section, earlier in this chapter, the exam- 
ple uses XML and AJAX to create a characters table. This time, I take the 
same code and show you how to use JSON and AJAX to do the same thing. 

Here's the PHP that sends back the JSON to the browser: 

<?php 

$characters = array ( 
"jd" => array ( 

"first" => "John", 
"last" => "Dorian", 
"age" => 32, 

"occupation" => "Attending Physician"), 
"elliot" => array ( 

"first" => "Elliot", 
"last" => "Reid" , 
"age" => 30, 

"occupation" => "Private Practice Physician"), 
"turk" => array ( 
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"first" => "Christopher", 
"last" => "Turk", 
"age" => 31, 

ccupation" => "Attending Surgeon"), 

> array ( 
irst " => " Robert " , 
"last" => "Kelso", 
"age" => 65, 

"occupation" => "Chief of Medicine") 

); 

print ( json_encode ($characters) ) ; 



The following is the page that turns the JSON into a table and displays it to 
the user (see Figure 4-2): 

<div id="response"x/div> 

<button id="getCharacters">Get The Characters ! </button> 

< script type=" text/ javascript " src= " inc/ j query- 1 .2.1 .min. js "></script> 
<link rel= "stylesheet" href = "inc /themes /flora/ flora. all . ess " type=" text /ess" 

media=" screen" title="Flora (Default) "> 
< script src="inc/ui . tablesorter . js"x/script> 
<script type= "text/ javascript "> 
$ ( " #getCharacters" ) . click ( function ( ) { 

$ . a j ax ( { 

url : " json.php" , 

dataType: "json", Chanter 4 

success: pageUpdate, " 
error: pageError = functionfreguest, error) { 
alert (error) ; 
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alert ( "done" ) ; 
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complete: pageComplete = function{){ ^ w 
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} 

}) 

}) ; m 

B) 

function pageUpdate (data, statusText) { 

var theTable = '<table class="tablesorter"><thead><trxtd>First 
Name< / tdxtd>Last 

Name</td><td>Age</td><td>Occupation</td></tr></theadxtbody> ' ; 
jQuery.eachldata, function!) { 

theTable += "<tr>"; 

j Query. each (this, function(){ 

theTable += "<td>" + this + "</td>"; 

}) ; 

theTable += "</tr>"; 

}) ; 

theTable += "</table>"; 

$ ( "#response" ) .html (theTable) ; 

$ ( " . tablesorter" ) . tablesorter ( ) ; 

} 

</script> 
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Figure 4-2: 
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of the pro- 
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Note the double-nested each loop. In the outer each loop, " this " repre- 
sents the main array for each character that's taken out of the response data 
while the loop iterates through all the characters. In the inner each loop, 
" this " represents each element of the character array. It can be confusing 
to have two this keywords that each contain different data, but try not to 
let it mix you up. If you want, instead of having an each loop inside the outer 
each loop, you could access each element individually by hand because you 
know the structure of the data you are getting back: 



j Query. each (data, function{){ 



theTable 
theTable 
theTable 
theTable 
theTable 
theTable 



<tr>" ; 
<td>" + 
<td>" + 
<td>" + 
<td>" + 
</tr>" ; 



this. first + "</td>"; 
this. first + "</td>"; 
this. age + "</td>"; 
this . occupation + "</td>" 




With the two previous examples, there's about a 30-percent decrease in 
the non-data code that's sent back to the browser in the request (the XML 
response has about 400 non-data characters, and the JSON response has 
about 270). That means that with JSON, the response time with AJAX will be 
at least 30-percent faster, and you type 30-percent less code. 
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"Look into my Web site, Hs. Carruthers. 
Look deep into its rotating spiral, 
spinning, spinning, pulling you deeper 
into its vortex, deeper... deeper...'" 
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EM/eh pages are a complex undertaking. The basic Web page itself isn't 
▼ ▼ too overwhelming, but Web pages are unique because they have 
meaning only in the context of the Internet — a vastly new undertaking with 
unique rules. 

Depending where you are on your Web development journey, you may need 
to understand the entire architecture, or you may be satisfied with a smaller 
part. Still, you should have a basic idea of how the Internet works and how 
the various technologies described in this book fit in. 



Understanding Clients and Servers 

A person using the Web is a client. You can also think of the user's computer 
or browser as the client. Clients on the Internet have certain characteristics: 



♦ Clients are controlled by individual users. You have no control 
over what kind of connection or computer the user has. It may not 
even be a computer, but may be instead a cellphone or (I'm not kidding) 
refrigerator. 

♦ Clients have temporary connections. Clients typically don't have per- 
manent connections to the Internet. Even if a machine is on a perma- 
nent network, most machines used as clients have temporarily assigned 
addresses that can change. 

♦ Clients might have wonderful resources. Client machines may have 
multimedia capabilities, a mouse, and real-time interactivity with the user. 
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♦ Clients are limited. Web browsers and other client-side software are 
often limited so that programs accessed over the Internet can't make 
sgajor changes to the local file system. For this reason, most client pro- 
-ams operate in a sort of "sandbox" to prevent malicious coding. 

♦ Clients can be turned off without penalty. It doesn't really cause any- 
body else a problem if you turn off your computer. Generally, client 
machines can be turned off or moved without any problems. 

Servers are the machines that typically host Web pages. They have a much 
different set of characteristics: 

♦ Servers are controlled by server administrators. A server administra- 
tor is responsible for ensuring that all data on the server is secure. 

♦ Servers have permanent connections. The purpose of a server is to 
allow requests. For this reason, a server needs to have an IP number 
permanently assigned to it. 

♦ Servers usually have names, too. To make things easier for users, 
server administrators usually register domain names to make their 
servers easier to find. 

♦ Servers can access other programs. Web servers often talk to other pro- 
grams or computers (especially data servers). 

4- Servers must be reliable. If a Web server stops working, anybody trying 
to reach the pages on that server is out of luck. This is why Web servers 
frequently run Unix or Linux because these operating systems tend to be 
more stable. 

♦ Servers must have specialized software. The element that truly makes a 
computer a server is the presence of Web server software. Although sev- 
eral options are available, only two dominate the market: Apache and 
Microsoft IIS. 

Parts of a client-side development system 

A development system is made up of several components. If you're program- 
ming on the client (using XHTML, CSS, and JavaScript), you need the follow- 
ing tools: 

♦ Web browsers: You need at least a couple of browsers so that you can 
see how your programs behave in different ones. Firefox is especially 
useful for Web developers because of its numerous available extensions. 

♦ Browser extensions: Consider adding extensions to Firefox to improve 
your editing experience. Web Developer, Firebug, and HTML Validator 
are extremely helpful. 

♦ Text editor: Almost all Web development happens with plain text files. 
A standard text editor should be part of your standard toolkit. I prefer 
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Notepad++ for Windows and prefer VI or emacs for other operating 
systems. 

rated Development Environment: Aptana Studio is a specialized 
'editor with added features for Web programming. It understands all 
the main Web languages and has syntax help, code coloring, and pre- 
view features. 




For client-side development, you don't necessarily need access to a server. 
You can test all your programs directly on your own machine with no other 
preparation. Of course, you'll eventually want a server so that you can show 
your pages to everyone. 

The client-side development tools listed here are described in more detail in 
Book I, Chapter 3. 

Parts of a server -side system 

When you start working on the server side (with PHP, MySQL, and AJAX), 
you need a somewhat more complex setup. In addition to everything you 
need for client-side development, you also need these items: 

♦ A Web server: This piece of software allows users to request Web pages 
from your machine. You must either sign on to a hosting service and use 
its server or install your own. (I show you both techniques in this chap- 
ter.) By far the most common server in use is Apache. Web server soft- 
ware usually runs all the time in the background because you never 
know when a request will come in. 

♦ A server-side language: Various languages can be connected to Web 
servers to allow server-side functionality. PHP is the language I chose in 
this book because it has an excellent combination of power, speed, price 
(free), and functionality. PHP needs to be installed on the server 
machine, and the Web server has to be configured to recognize it. 

♦ A data server: Many of your programs work with data, and they need 

some sort of application to deal with that data. The most common data Book VIII 
server in the open-source world is MySQL. This data package is free, Chapter 1 

powerful, and flexible. The data server is also running in the background 
all the time. You have to configure PHP to know that it has access to 
MySQL. 



♦ A mail server: If your programs send and receive e-mail, you need some cf £ 
sort of e-mail server. The most popular e-mail server in the Windows S =' 
world is Mercury Mail, and Sendmail is popular in the world of Unix and w 
Linux. You probably won't bother with this item on a home server, but 

you should know about it when you're using a remote host. 

♦ An FTP server: Sometimes, you want the ability to send files to your 
server remotely. The FTP server allows this capability. Again, you 
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probably don't need this item for your own machine, but you definitely 
should know about it when you use a remote host. 



pMy Admin: There's a command-line interface to MySQL, but it's lim- 
d and awkward. The easiest way to access your MySQL databases is 
to use the phpMyAdmin program. Because it's a series of PHP programs, 
it requires a complete installation of PHP, MySQL, and Apache. 



Creating \lour Ou/n Sert/er u/ith XAMPP 

If the requirements for a Web hosting solution seem intimidating, that's 
because they are. It's much more difficult to set up a working server system 
by hand than it is to start programming with it. 

I don't recommend setting up your own system by hand. It's simply not 
worth the frustration because very good options are available. 

XAMPP is an absolutely wonderful open-source tool. It has the following 
packages built in: 

♦ Apache: The standard Web server and the cornerstone of the package 

♦ PHP: Configured and ready to start with Apache and MySQL 

♦ MySQL: Also configured to work with Apache and PHP 

♦ phpMyAdmin: A data management tool that's ready to run 

♦ Mercury Mail: A mail server 

♦ FileZilla FTP server: An FTP server 

♦ PHP libraries: A number of useful PHP add-ons, including gd (graphics 
support), Ming (Flash support), and more 

♦ Additional languages: Perl, another extremely popular scripting and 
server language, and SQLite, another useful database package 

♦ Control and configuration tools: A Control Panel that allows you to 
easily turn various components on and off. 

This list is a description of the Windows version. The Mac and Linux ver- 
sions have all the same types of software, but the specific packages vary. 

Considering the incredible amount of power in this system, the download is 
remarkably small. The installer is only 34MB. A copy is included on the 
CD-ROM that accompanies this book. 

XAMPP installation is pretty painless: Simply download the installer and 
respond to all the default values. 
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If you're using Vista, you may want to change where the package is installed 
berause the program files directory is causing problems for some users. 

fuming XAMPP 

After you install XAMPP, you can manage your new tools with the XAMPP 
Control Panel. Figure 1-1 shows this program in action. 



Figure 1-1: 

The XAMPP 
Control 
Panel 
allows you 
to turn 
features on 
and off. 



XAMPP Control Panel Application 



EJ 

Modules 

□ Svc 
0Svc 

□ Svc 



XAMPP Control Panel 



5e-vice 5e::ipgs.., 



| idmir 



Apache Running Fj 

MySql Running [ Stop ] | Admin... 
FileZilla I Start I I Admin... 



Apache starred 

Refresh. . . 
Don* 

HUBS Application Status 1.1.1.2 

apache State 1 Service 3 Start 0 Thread fc-4 Op 0 
mysql State 1 Service 1 Start : Thread 0 Op 0 
ftp State □ Service 3 Start Q Thread 3 Op 0 
■■ 1 1 in State C Service 0 Start 0 Thread 0 Op 0 



Some components of XAMPP (PHP, for example) run only when they're 
needed. Some other components (Apache and MySQL) are meant to run con- 
stantly in the background. Before you start working with your server, you 
need to ensure that it's turned on. 




You can choose to run Apache and MySQL as a service, which means that 
the program is always running in the background. This arrangement is con- 
venient, but it slightly reduces the performance of your machine. I generally 
turn Apache on and off as I need it and leave MySQL running as a service 
because I have a number of other programs that work with MySQL. 

Leaving server programs open on your machine constitutes a security 
hazard. Be sure to take adequate security precautions. See the section 
"Setting the security level," later in this chapter, for information on setting 
up your security features. 

Testing your XAMPP configuration 

Ensure that Apache and MySQL are running, and then open your Web 
browser. Set the address to http : / /localhost, and you see a screen like 
the one shown in Figure 1-2. 
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Welcome to XAMPP for Windows Version 1.6.0a ! 

Congratulations: 

You successfully installed XAMPP on this system! 

Now you can start using Apache and Co. Firstly you should try "Status- on the left navigation to make sure everything works fine. 
For QpenSSL support please use the test certificate with httus.n iir.u.o.i or https;//'localhost 

And very important! Big thanks for help and support to Carsten, Nemesis, KriS, Boppy, Pc-Dummy and all other friends of XAMPP! 
Good luck, Kay Vogelgesang + Kai 'Oswald' Seidler 
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This page indicates that XAMPP is installed and working. Feel free to experi- 
ment with the various items in the Demos section. Even though you may not 
know yet what they do, you should know what some of their capabilities are. 




Adding your own files 



Of course, the point of having a Web server is to put your own files in it. Use 
your file management tool to find the XAMPP directory in your file system. 
Right under the XAMPP directory is the htdocs folder, the primary Web 
directory. Apache serves only files that are in this directory or under it. 
(That way, you don't have to worry about your love letters being distributed 
over the Internet.) 

All the files you want Apache to serve must be in htdocs or in a subdirec- 
tory of it. 

When you specified http : //localhost as the address in your browser, 
you were telling the browser to look on your local machine in the main 
htdocs directory. You didn't specify a particular file to load. If Apache isn't 
given a filename and it sees the file named index . html or index . php, it 
displays that file, instead. So, in the default htdocs directory, the index. php 
program is immediately being called. Although this program displays the 
XAMPP welcome page, you don't usually want that to happen. 
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Rename index . php to index . php . old or something similar. It's still 
there if you want it, but now there's no index page, and Apache simply gives 
of files and folders in the current directory. Figure 1-3 shows my 
st directory as I see it through the browser. 



>3t Index of / - Mozilla Firefox 



Figure 1-3: 

After 
disabling 
index.php, 
I can see 
a list of 
files and 
directories. 
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You typically don't want users to see this ugly index in a production server, 
but I prefer it in a development environment so that I can see exactly what's 
on my server. After everything is ready to go, I put together index . html or 
index.php pages to generate more professional directories. 

Generally, you want to have subdirectories to all your main projects. I added Chapter 1 
a few others for my own use, including xf d, which contains all the code for 
this book. 

If you want to display the XAMPP welcome screen after you remove the = ^ 

index.php program, simply point your browser to http : //localhost/ Jj? § 

xampp. < =■ 

™ to 

w 

Setting the security leVel 

When you have a Web server and a data server running, you create some 
major security holes. You should take a few precautions to ensure that 
you're reasonably safe: 
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Treat your server only as a local asset. Don't run a home installation of 
Apache as a production server. Use it only for testing purposes. Use a 
mote host for the actual deployment of your files. It's prepared for all 
e security headaches. 




Run a firewall. You should run, at an absolute minimum, the Windows 
firewall that comes with all recent versions of Windows. You might also 
consider an open-source or commercial firewall. Block incoming access 
to all ports by default and open them only when needed. There's no real 
need to allow incoming access to your Web server. You only need to run 
it in localhost mode. 

If you want to see which ports XAMPP uses for various tools, they are 
listed on the security screen shown in Figure 1-4. 

♦ Run basic security checks. The XAMPP package has a handy security 
screen. Figure 1-4 shows the essential security measures. I've already 
adjusted my security level, so you'll probably have a few more "red 
lights" than I do. Click the security link at the bottom of the page for 
some easy-to-use security utilities. 

♦ Change the MySQL root password. If you haven't already done so, 
use the security link to change the MySQL root password, as shown in 
Figure 1-5. (I show an alternative way to change the password in Book VI, 
Chapter 1.) 
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XAMPP 
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XAMPP SECURITY [Security Check 1.0] 



Figure 1-4: 

The XAMPP 
Security 
panel 
shows a 
few weak- 
nesses. 
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These XAMPP pages are no longer accessible by network For everyone 
The MySQL admin user root has no longer no password 
PhpMyAdmin is free accessible by network 

PhpMyAdmin is mmmM by network without password The configuration httpd' ot 'cookie in the 



A FTP server is not running or is blocked by a firewall! 



PHP is NOT running in "safe mode" 

IF do you MAt to offer PHP executions For outside persons, please think about a "safe mode' conFiguratlon . But for 
standalone developer we recommend NOT the "saFe mode ' configuration because some important functions will not 
working then More Info 



The green marked points are secure; the red marked points are definitively unsecure and the yellow marked points couldn't 
be checked (for example because the sofware to check isn't running). 

To fix the problems for mysql, phpmyadmin and the xampp directory simply use 

=> http: / / local host/ sec uritv/xamppsecuritv.p hp <= [allowed only for localhost] 



Some other important notes: 
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Changing 
the MySQL 
root pass- 
word. 



E] XAMPP for Windows 



MYSQL SECTION: "ROOT" PASSWORD 



MySQL SuperUser: 


root 


Current pass wort: 






New password: 






Repeat the new password: 
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♦ Add an XAMPP Directory password. Type a password into the lower 
half of the security form to protect your xampp directory from unautho- 
rized access. When you try to go to the xampp directory, you're 
prompted for this password. 

Security is always a compromise. When you add security, you often intro- 
duce limits in functionality. For example, if you changed the root password 
for MySQL, some of the examples (and phpMyAdmin) may not work any 
more because they're assuming that the password is blank. You often have 
to tweak. See Chapter 1 in Book VI for a complete discussion of password 
issues in MySQL and phpMyAdmin. Book VIII 

Chapter 1 

Compromising between functionality and security 

You may be shocked that my example still has a couple of security holes. It's g: 
true, but it's not quite as bad as it looks: = p 

♦ The firewall is the first line of defense. If your firewall blocks external < =' 
access to your servers, the only real danger your system faces is from « 10 
yourself. Begin with a solid firewall and ensure that you don't allow 

access to port 80 (Apache) or port 3306 (MySQL) unless you're 
absolutely sure that you have the appropriate security measures in 
place. 
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♦ I left phpMyAdmin open. phpMyAdmin needs root access to the MySQL 
database, so if anybody can get to phpMyAdmin through the Web server, 
Afeey can get to my data and do anything to it. Because my firewall is 
Rocking port 80 access, you can't get to phpMyAdmin from anything 
other than localhost access, and it's not really a problem. 

♦ I'm not running PHP in secure mode. Secure mode turns off several 
PHP features to make the connection a bit more secure. Unfortunately, 
this process also removes some important functionality. For localhost 
access, I normally leave the default PHP configuration in place. 

Choosing a Web Host 

Creating a local server is useful for development purposes because you can 
test your programs on a server you control and you don't need a live con- 
nection to the Internet. 

However, you should avoid running a production server on your own com- 
puter, if you can. A typical home connection doesn't have the guaranteed IP 
number you need. Besides, you probably signed an agreement with your 
broadband provider that you won't run a public Web server from your 
account. 

This situation isn't really a problem because thousands of Web hosting serv- 
ices are available that let you easily host your files. You should consider an 
external Web host for these reasons: 

♦ The host, not you, handles the security headaches. This reason alone is 
sufficient. Security isn't difficult, but it's a never-ending problem 
(because the bad guys keep finding new loopholes). 

♦ The remote server is always up. Or, at least, it should be. The dedicated 
Web server isn't doing anything other than serving Web pages. Your Web 
pages are available, even if your computer is turned off or doing some- 
thing else. 

♦ A dedicated server has a permanent IP address. Unlike most home 
connections, a dedicated server has an IP address permanently assigned 
to it. You can easily connect a domain name to a permanent server so 
that users can easily connect. 

♦ Ancillary services usually exist. Many remote hosting services offer 
other services, like databases, FTP, and e-mail hosting. 

♦ The price can be quite reasonable. Hosting is a competitive market, 
which means that some good deals are available. Decent hosting is avail- 
able for free, and improved services are extremely reasonable. 
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You can find a number of free hosting services at sites like http : / / 
f ree-webhosts . com. 



When looking for a hosting service, ask yourself these questions: 

♦ Does the service have limitations on the types of pages you can host? 

Some servers are strictly for personal use, and some allow commercial 
sites. Some have bandwidth restrictions and close your site if you draw 
too many requests. 

♦ How much space are you given? Ordinary Web pages and databases 
don't require a huge amount of space, but if you do a lot of work 
with images, audio, and video files, your space needs will increase 
dramatically 

♦ Is advertising forced on you? Many free hosting services make money 
by forcing advertisements on your pages. This practice can create a 
problem because you might not always want to associate your page with 
the company being advertised. (A page for a day care center probably 
should not have advertisements for dating services, for example.) 

♦ Which scripting languages (if any) are supported? Look for PHP 
support. 

♦ Does the host offer prebuilt scripts? Many hosts offer a series of pre- 
built and preinstalled scripts. These can often include content manage- 
ment systems, message boards, and other extremely useful tools. If you 
know that you're going to need Moodle, for example (a course manage- 
ment tool for teachers), you can look for hosting services that have it 
built in. 

♦ Does the host provide access to a database? Is phpMyAdmin support 
provided? How many databases do you get? What is the size limit? 

♦ What sort of Control Panel does the service provide? Does it allow 
easy access to all the features you need? 

♦ What type of file management is used? For example, determine how 
you upload files to the system. Most services use browser-based upload- 
ing. This system is fine for small projects, but it's quite inconvenient if 
you have a large number of files you want to transfer. Look for FTP sup- 
port to handle this. 

♦ Does the host have an inactivity policy? Many free hosting services 
automatically shut down your site if you don't do anything with it (usu- 
ally after 30 to 90 days of inactivity). Be sure you know about this policy. 

♦ Do you have assurances that the server will remain online? Are back- 
ups available? What sort of support is available? Note that these serv- 
ices are much more likely on a paid server. 
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How easily can you upgrade if you want? Does a particular hosting 
plan meet your needs without being too expensive? 



es the service offer you a subdomain, and can you register your 

n? You may also want to redirect a domain that you didn't get 
through the service. (See the section "Naming Your Site," later in this 
chapter, for information on domain names.) 



Connecting to a hosting service 

The sample pages for this book are hosted on Freehostia.com, an excellent, 
free hosting service. You can find many great hosting services, but the rest 
of the examples in this chapter use Free Hostia. I chose this service for the 
examples because 



♦ Its free account is terrific. At the time of this writing, the features of 
the free account at Free Hostia are as good as they are at many paid 
accounts. 

♦ The pages have no forced advertising. Free Hostia doesn't place any 
ads on your pages (a major selling point for me). 

♦ PHP, phpMy Admin, and MySQL are supported — all on the free 
account. Often, you have to upgrade to a paid service to get these 
features. 

♦ You get enough space to start with. The free account comes with 250MB 
of space. This amount is fine for ordinary Web pages, PHP, and database 
needs. You need more, though, if you do a lot of image or video hosting. 

♦ You can have a subdomain for free. Even if your site doesn't have a 
domain name, you can choose a subdomain so that your site has a rec- 
ognizable address, like http : //myStuf f . f reehostia. com. 

♦ It has a good list of script installers. It comes with a nice batch of 
scripts that you can install effortlessly. 

♦ The upgrade policy is reasonable. Free Hostia makes money on com- 
mercial Web hosting. It offers an excellent free service that, ideally, gets 
you hooked so that you then upgrade to a commercial plan. It has a 
number of good upgrade packages for various sizes of businesses. 

♦ You get a nice batch of extras. The free service comes with FTP and 
e-mail support and also a MySQL database. 

♦ Customer support is excellent. Most free hosting services offer no cus- 
tomer support. Free Hostia provides good support, even to the free serv- 
ices. (I asked a couple of questions before anyone there knew that I was 
writing this book, and I was impressed with the speed and reliability of 
the responses.) 
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Choose whichever hosting service works for you. If you find a free hosting 
service that you really like, upgrade to a paid service. Hosting is a reason- 
ip commodity, and a quality hosting service is well worth the 
int. 



Managing a Remote Site 

Obviously, having a hosting service isn't much fun if you don't have pages 
there. Fortunately, there are a lot of ways to work with your new site. 

Using Web-based file toots 

Most of the time, your host has some sort of Control Panel that looks like the 
one shown in Figure 1-6. 

There's usually some sort of file management tool that might look like the 
one shown in Figure 1-7. 

In this particular case, all my Web files are in the www/aha.r:risbooks . net 
directory, so I click to see them. Figure 1-8 shows what you might see in an 
actual directory. 
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Figure 1-6: 

This Control 
Panel 
allows you 
to manage 
your site 
remotely. 



file Edt View rtstorv Bookmarks Tools 



<jl • - ^ . * 21 rtttpsi/'cs.fteettMtia.commefTioeis 



& Stumble' felMteit! ^ <§> ''Sendto' Q , Channel: 3 ft, r?) 3$ - & All - , 4 Favorites £ Friends I Tools- 



Free Hostia Control Panel 

Site Management E-mail Options i Web Tools 



IS 

Help Center My Account 



English V 



aharrisbooks.ni 



— Quick Controls 




2 298 



Site Management 



Hosted Domains Domain Manager Subdomain Manager Custom DIIS Records FTP Manager 



File Manager FrontPage Eitensions MySQL Databases 



I 

Manage 



SSL Certificate Requests 



PHP Settings 

E-mail Options 



0 B> 0 

pam Protection SPF Protection E-mail Forwarding 



i2L 



cp.freehosOa.com £ $ 91 errors / l'A-arrtng O i3r Adbjock 0 How: H a! e, 3S : F Thu: 46= F Fn: *3 = F 



Book VIII 
Chapter 1 



IS 
~ 01 

? to 

is 



816 Managing a Remote Site 



DropBoo 



Figure 1-7: 

This file 
manage- 
ment tool 
allows 
you to 
manipulate 
the files on 
your system. 
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Figure 1-8: 

Now, you 
can see 
some files 
here. 
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This page allows you to rename, upload, and edit existing files and change 
file permissions. 



reate a new file directly, with the Create File button. Type a file- 
name into the text area and click the button, and you see the text editor 
shown in Figure 1-9. 
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You can write an entire Web site using this type of editor, but the Web-based 
text editing isn't helpful, and it's kind of awkward. More often, you create 
your files on your own XAMPP system and upload them to the server when 
they're basically complete. Use server-side editing features for quick fixes 
only. 



more sophisticated file permission mechanism than the Windows file system 
does. At some point, you may need to manipulate file permissions. 

Essentially, the universe is divided into three populations: Yourself, your 
group, and everybody else. You can allow each group to have different kinds 
of permission for each file. Each of the permissions is a Boolean (true or 
false) value: 
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Understanding file permissions 

Most hosting services use Linux or Unix. These operating systems have a c/> ~ 
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What's with all the permissions? 

mTsyicms"'Sre typically treated as binary 
numbers: 111 means "read, write, execute." 
This (111 value) is also a 7 permission because 
1 1 1 binary translates to 7 in base ten (or base 
eight, but let's skip that detail for now). 



can be translated as "The owner should be 
able to read and write this file. Everyone else 
can read it. Nobody can execute it." 



A permission is read asthree digits, each one a 
number indicating the permissions, so 644 per- 
mission means rw- r-- r--. This example 



If you don't understand this concept, don't 
worry about it. The guidelines are very simple: 
Make sure that each of your files has 644 per- 
mission and that each directory has 755 per- 
mission. That's all you really need to know. 



♦ Read permission: The file can be read. Typically, you want everybody to 
be able to read your files, or else you wouldn't put them on the Web 
server. 

♦ Write permission: The file can be written, changed, and deleted. 
Obviously, only you should have the ability to write to your files. 

♦ Execute permission: Indicates that the file is an executable program or a 
directory that can be passed through. Normally, none of your files is 
considered executable, although all your directories are. 

Using FTP to manage your site 

Most of the work is done on a local machine and then sent to the server in a 
big batch. (That's how I did everything in this book.) The standard Web- 
based file management tools are pretty frustrating when you want to effi- 
ciently upload a large number of files. 

Fortunately, most hosts have the FTP (File Transfer Protocol) system avail- 
able. FTP is a client/server mechanism for transferring files efficiently. To use 
it, you may have to configure some sort of FTP server on the host to find out 
which settings, username, and password you should use. Figure 1-10 shows 
the Free Hostia Control Panel with this information displayed. 

You also need an FTP client. Fortunately, many free clients are available. I 
like FireFTP, for a number of reasons: 

♦ It's free and open source. That's always a bonus. 

♦ It works as a Firefox plugin. I always know where it is. 

♦ It's easy to use. It feels just like a file manager. 

Figure 1-11 shows FireFTP running in my browser. 
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Figure 1-10: 

Configuring 
the FTP 
server. 
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Figure 1-11: 

FireFTP is a 
complete 
FTP pro- 
gram that 
runs inside 
Firefox. 
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If you want to connect to your server with FTP, follow these steps: 
4^)ok up the configuration settings. 

wu may have to dig around in the server documentation, but you 
should find the server name, username, and password to access your 
server. Sometimes, you have to configure these elements yourself. 

2. Create a profile for your server. 

Use the Manage Accounts feature to create a profile using the FTP set- 
tings. Figure 1-12 shows a profile for my aharrisbooks account. 
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Figure 1-12: 

The profile 
editor for 
FireFTP. 



Account Manager 



Li 



Mam Connection Advanced 



Account Name: | 

Host: xfd.freehostia.com 



Password: 



l~l Anonymous 



3. Connect to the remote server. 

FTP programs look a lot like the Windows Explorer you might have on 
your machine, except that they usually have two file panels. The left 
panel represents the files on your local system, and the right panel 
shows files on the remote system. 

4. Navigate to the directories you're interested in. 

If you want to move a file from the local system to the remote one, use 
the two file explorers to find the appropriate directory on each system. 

5. Drag the file to transfer it. 

FireFTP automatically determines the type of transfer you need to make. 

6. Wait for the transfer to complete. 

It usually takes some time to transfer a large number of files. Be sure the 
transfer is complete before you close the FTP window. 
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7. Manipulate remote files. 
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You can right-click on the remote file system to display a context menu, 
menu has commands for changing permissions, creating directo- 
and performing other handy tasks. 




FTP is a completely unsecure protocol. Anything you transfer with FTP is 
completely visible to any bad guys sniffing the Internet. For this reason, 
some servers use a different protocol: Secure FTP (SFTP). FireFTP doesn't 
support this protocol, but search Google for open-source SFTP clients, and 
you'll find plenty. 



Naming \lour Site 

After you have a site up and running, you need to give it an address that 
people can remember. The Domain Name System (DNS) is sort of an address 
book of the entire Internet. DNS is the mechanism by which you assign a 
name to your site. 



Understanding domain names 

Before creating a domain name, you should understand the basics of how 
this system works: 



♦ Every computer on the Internet has an IP (Internet Protocol) address. 

When you connect to the Internet, a special number is assigned to your 
computer. This IP address uniquely identifies your computer. Client 
machines don't need to keep the same address. For example, my note- 
book has one address at home and another at work. The addresses are 
dynamically allocated. A server needs a permanent address that doesn't 
change. 

♦ IP addresses are used to find computers. Any time you request a Web 
page, you're looking for a computer with a particular IP address. For 
example, the Google IP address is 66.102.9.104. Type it into your 
browser address bar, press Enter, and you see the Google main page. 

♦ DNS names simplify addressing. IP numbers are too confusing for 
human users. The Domain Name System (DNS) is a series of databases 
connecting Web site names with their associated IP numbers. When you 
type http : / /www . google . com, for example, the DNS system looks 

up the text www. google . com and finds the computer with the associ- 
ated IP. 

♦ You have to register a DNS name. Of course, to ensure that a particular 
name is associated with a page, you need to register that relationship. 
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Registering a domain name 

In this section, I show you how to register a domain using Freehostia.com. 



i the documentation on your hosting service. Chances are that the 
technique is similar, even if the details are different. 



To add a domain name to your site, follow these steps: 

/. Log in to the service. 

Log in to your hosting service administration panel. You usually see a 
Control Panel something like the one shown in Figure 1-13. 

2. Find the domain manager. 

In Free Hostia, the domain manager is part of the regular administration 
panel. 

3. Pick a subdomain. 

In a free hosting service, the main domain (f reehostia . com, for exam- 
ple) is often chosen for you. Sometimes, you can set a subdomain (like 
mystuf f . f reehostia . com) for free. The page for managing this 
process might look like Figure 1-14. 



Figure 1-13: 

This Control 
Panel 
shows all 
the options, 
including 
domain and 
subdomain 
tools. 




4^ Free Hostia Control Panel 

Site Management E-mail Options Web Tools 



| My Account 



W Il2 Quick Controls 



Register I Transfer 



/-best-domain.ci 




S W '« £ 

Hosted Domains Domain Manager Subdomain Manager Custom DNS Records FTP Manager 



J E 13 

File Manager FrontPage Entensions MySQL Databases 



Password Protected 



J 

P Manage 



SSL Certificate Requests 



E-mail Manager 



mail Filter 



0 0 0 



E-mail Forwarding 



p. freehosOa.com £ <J 9 1 errors / 1 warning Q ijt 0 Now: Haie, 36°F Thu:* 1! F t -"_^ Fn: 48° F Qj 



Naming l/our Site 823 




Figure 1-14: 

Use this 
page to 
create a 
subdomain 
for your 
account. 
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4. Look for a domain search tool. 




Often, you have a tool, like the one shown in Figure 1-15, that allows you 
to search for a domain. 

5. Search for the domain name you want. 

You can type a domain name to see whether it's available. 

6. If the domain name is available to register and you want to own it, 
purchase it immediately. 

If a domain is available to transfer, it means that somebody else proba- 
bly owns it. 

Don't search for domains until you're ready to buy them. Unscrupulous 
people on the Web look for domains that have been searched and then 
buy them immediately, hoping to sell them back to you at a higher price. 
If you search for a domain name and then go back the next day to buy it, 
you often find that it's no longer available and must be transferred. 

7. Register the domain. 

The domain-purchase process involves registering yourself as the 
domain owner. Figure 1-16 shows a typical form for this transaction. 
WHOIS information provides your information to people inquiring about 
the domain name. 
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Figure 1-15: 

I'm search- 
ing for 
aharris 
books.net — 
it seems 
like a good 
domain 
name! 
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Figure 1-16: 
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name. 
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8. Wait a day or two. 

Your new domain name won't be available immediately. It takes a couple 
ys for the name to be registered everywhere. 



9. Remember to renew your domain registration. 

Domain-name registration isn't expensive (typically about $10 per year), 
but you must renew it or risk losing it. 



Managing Data Remotely 

Web sites often work with databases. Your hosting service may have features 
for working with MySQL databases remotely. You should understand how 
this process works because it's often slightly different from working with the 
database on your local machine. 

Creating your database 

Often, a tool like the one shown in Figure 1-17 allows you to pick a defined 
database or create a new one. 
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Figure 1-17: 

You often 
have to 
create a 
database 
outside of 
phpMy- 
Admin. 
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This database creation step happens because you don't have root access to 
MySQL. (If everybody had root access, chaos would ensue.) Instead, you 
y have an assigned username and database name enforced by the 
•. On Free Hostia, all database names begin with the username and an 
underscore. To create a new database, you need to provide a database name 
and a password. Usually, a MySQL user is created with the same name as the 
database name. 




After you create the database, you can select it to work with the data in 
MySQL. Figure 1-18 shows the MySQL screen for my database on Free Hostia. 

If you look carefully, you see that Free Hostia is still using MySQL 4. There- 
fore, not all SQL scripts in this book work correctly The only significant 
problem is views because this feature wasn't included in MySQL 4. 1 include 
a version of the buildHero4 . sql script on the CD-ROM that eliminates all 
references to views. Otherwise, the script is the same. 

You can see from Figure 1-18 that phpMyAdmin is somewhat familiar if you 
read Book VI. Often, public servers remove the Privileges section because 
you aren't logged in as root. Everything else is basically the same. See Book 
VI for details on how to use PHPMyAdmin to work with your databases. 



Figure 1-18: 

phpMy- 
Admin is 
just like the 
one on your 
home 
machine! 
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Finding the MySQL server name 

|rou£hout Book VI, I assume that the MySQL server is on the same physi- 
^ine as the Web server. This situation is common in XAMPP installa- 
ut commercial servers often have separate servers for data. You may 
have to dig through the documentation or find a Server Statistics section to 
discover how your PHP programs should refer to your server. 

By far the biggest problem when moving your programs to a remote server 
is figuring out the new connection. Make sure that you know the right combi- 
nation of server name, username, and password. Test on a simple PHP appli- 
cation before working on a complex one. 
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In This Chapter 

v* Planning multipage Web sites 
\^ Working with the client 
e* Analyzing the audience 
v* Building a site plan 

Creating XHTML and CSS templates 
V Fleshing out the project 




t some point, your Web efforts begin to grow. Rather than think about 
single Web documents, you begin to build more complex systems. 



Most real-life Web problems require a lot more than a single page to do their 
work. How do you make the transition to a site with many different but 
interconnected pages? How do you think through the process of creating a 
site that serves a specific purpose? 

You might even be thinking about doing commercial Web development 
work. If so, it's definitely time to think about how to put together a plan for a 
customer. 

Creating a Multipage Web Site 

A complete Web site has these characteristics: 

♦ A consistent theme: All the pages in a Web site should be about 
something — a product, a shop, a hobby. It doesn't matter much what 
the theme is, but the pages should be unified around it. 

♦ Consistent design: The site should have a unified color scheme. All 
pages should have the same (or similar) layout, and the font choices 
and images should all use a similar style. 

♦ A navigation scheme: Users must have a clear method to move around 
from page to page. The organization of the pages and their relationships 
should be clear. 

♦ A common address: Normally, all pages in a site are on the same server 
and have a common DNS name so that they're easy to distinguish. 




Obviously, the skills of Web design are critical to building a Web site, but 
another, broader skill set is required when creating something larger than 



If you're starting to build a more complicated Web site, you need to have a 
plan, or else you won't succeed. This plan is even more important if you're 
building a site for somebody else. 



Here are some questions you need to ask yourself when designing a larger 
Web site: 

♦ What's the point of the site? The site doesn't have to be serious, but it 
does have to have a theme. If you don't know what your site is about, 
neither do your users (and they'll leave in a hurry). 

♦ Who am I talking to? Web sites are a form of communication, and you 
can't communicate well if you don't understand your audience. Who is 
the primary target audience for this site? 

♦ Which resources do I have available? Resources involve a lot more 
than money (but it helps). How much time do you have? Do you have 
access to a solid technical framework? Can you get help if you need it? 
Do you have all the copy and raw materials? 

♦ What am I trying to say? Believe it or not, this question often poses a 
huge problem. Somebody says, "I need a Web site." When you ask what 
she wants on the site, she says, "Oh, lots of things." When you try to pin 
down the answers, though, people often don't know what they want 
their Web site to say. 

♦ What are the visual design constraints? If you're building a page for a 
small business, it probably already has some kind of visual identity 
(through brochures or signage, for example). The business owner often 
wants you to stick within the company's current branding, which may 
involve negotiation with graphic artists or advertisers the business has 
worked with. 

♦ Where will I put this thing? Does the client already have a domain 
name? Will moving the domain name cause a problem? Does content 
that's already on the Web need to be moved? Do you already have host- 
ing space and a DNS name in mind? 



Often, a larger site is created at the behest of somebody else. Even if you're 
making a site for your own purposes, you should consider yourself a client. 




Planning a Larger Site 



Understanding the Client 
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If the project is going to be successful, you need to know a few things about 
the client, as described in the following sections. 



nq that the client's expectations are clear 

The short answer to the question of whether a client's expectations are clear 
is "Not usually." 

A client who truly understands the Internet and knows what it takes to real- 
ize her vision for the site probably doesn't need you. Most of the time, a 
client's own concepts of what should happen on the site are vague, at best. 
Here are some introductory questions you can ask to get a sense of your 
client's expectations: 

♦ What are you trying to say with this site? If the Web site has a single 
message that can be boiled down to one phrase or sentence, find out 
what that message is. 

♦ Who are you trying to reach with this site? Determine who the client 
expects to be the typical users of the site. Find out whether she expects 
others and whether the site has more than one potential type of user. 
(For example, customers and employees may need different things.) 

♦ What problem is this site trying to solve? Sometimes, a Web site is envi- 
sioned as a solution to a particular problem (getting the schedule online 
or keeping an online newsletter updated, for example). 

♦ What kind of design framework is already in place? Determine 
whether the organization already has some sort of branding and design 
strategy or whether you have freedom in this arena. 

♦ What is the time constraint? Find out how quickly the client needs the 
site completed. Does the client want the entire project at one time, or 
can it be phased in? 

♦ Do you already have a technical framework in place? Determine 
whether the project needs to work with an existing database, Web 

n i if ill 

server, Web site, or domain name and whether you have complete 

access to those resources. Chapter 2 

♦ Are there security concerns? First ask whether you will be asked to 

post data (personal information, credit card numbers, or Social Security m 3 

numbers, for example) on the Internet that shouldn't be there. Run from g> |. 

any project that requires you to work with this potentially dangerous o <q 
data, unless you're extremely comfortable with security measures. 



How will you get the copy? Any professional Web developer can tell 
you that the client usually promises to make the copy available immedi- 
ately but rarely delivers it without a lot of pleading. If the content is 
available, it's often incomplete or incorrect. You need to have some plan 
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for getting the material from the client, or else you cannot proceed past 
a certain point. 



es the client have a remuneration strategy? If you will be paid for 
ur work, find out how you will be paid and whether it's hourly or by 
the project. If you have a business arrangement, treat it as such and 
write out a contract. Even if the page is written for free for a friend, a 
written contract is a good idea because you don't want to ruin a friend- 
ship over something as silly as a Web site. 



delineating the tasks 

Building a Web site can involve a lot of different tasks. Your contract should 
indicate which of these tasks is expected. This list describes the potential 
scope of the project: 



♦ Site layout: Determine which pages the site has and how they're con- 
nected to each other. 

♦ XHTML coding: Some projects simply require XHTML coding and CSS. 
Presumably the copy has already been provided, and you simply need 
to convert it to XHTML format. This work isn't difficult, but it's tedious. 
Use a text editor with macro capability — after you create an XHTML 
template. 

♦ XHTML template design: Devise an overall page design. The content 
isn't important here, but the general page design is the issue. This task 
requires sample data and an editor. It's normally done in conjunction 
with CSS templating. 

♦ CSS design: After you have an XHTML template or two (so that you 
know the logical structure of the pages), you can work on the visual 
design. Start with sketches on paper and maybe images from a paint pro- 
gram. After you have a layout approved, write the CSS to implement it. 

♦ Data design: If the project will have a database component, take some 
time to analyze (and, often, rebuild) the data structure to follow the nor- 
malization rules. Data work is difficult because it doesn't have a visual 
result, yet it's critical to the overall site. This step is usually put off until 
the end, and that decision often dooms Web projects. If you need data 
design, start it early. 

♦ Data implementation: If the project has a data component, write and 
test the SQL code to build the database, including tables, views, and 
sample queries. You need time to write PHP code to connect the data- 
base to the XHTML front end. 

♦ Site integration and implementation: It takes some effort to fit all the 

pieces back together and make them work. Usually, this process is ongo- 
ing. The site needs to be set up on a production server and then tested 
and launched. 
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♦ Testing: Testing your work with live users is critical. You can use formal 
usability studies, but failing that, you still learn a lot by asking people to 
our system and watching them do it (with your mouth shut). This 
od is the best way to see whether your assumptions are correct 
and the site is doing what it needs to do. 



Understanding the Audience 

Understanding your audience is one of the trickiest parts of Web planning. 
You need to anticipate the audience in a number of ways, as described in the 
following sections. 



Determining Whom you Want to reach 

Before you make a lot of design decisions, you need to think carefully about 
the type of person you're trying to reach in the Web site. 

Try to anticipate the mindset that people have when they use a particular 
site. For example, one of my students simultaneously worked on two sites: 
one for a graduate program at a university and another for a spa and salon. 
She had to think quite differently about the users of the two sites, which had 
implications for how she approached each step of the process. 

The graduate program page was part of a Web site for a university. The uni- 
versity already had its own style and branding guidelines, official colors, and 
a number of (evolving) standards. The potential users of this site were grad- 
uate students seeking online degrees. The focus of this site was all business. 
People were there to learn about the graduate program and set up their 
schedules. They wanted information about classes, instructors, and sched- 
ules, but they didn't want anything that interfered with the problem at hand. 
The writing was efficient and official, the color scheme was standard, and 
the layout was also official. 

The spa and salon page had an entirely different feel. The owner loves design Book VIII 
and spent long hours picking exactly the right paint color for the walls in the Chapter 2 
physical space. She's really happy with her brochure, and although she's not 
sure exactly what she wants, she knows when something isn't right. She ^ 
wants to give her customers information about the salon, but more impor- <g p 

tantly, she wants them to get a sense of how invigorating, relaxing, and femi- 5> ~ 

nine the experience of visiting her salon can be. The salon now has a site ° fj, 

that was hastily created by somebody's cousin. s- 1 

These two sites, although they require the same general technical skills, 
demand vastly different visual and technical designs because the clients and 
their users are vastly different. 
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Ironically, one person could simultaneously be a graduate student and a 
patron of the salon, but the same person would still have a different identity 
e different sites. If you're going to a university site, you're in a student 
et, and you want quick, reliable information. After you sign up for 
classes, if you're looking for a salon, you want to be pampered. 



Web sites are experiences. The design of the site should reflect the experi- 
ence you're trying to give the user when he visits your site. 



Finding out the user's teUet of technical expertise 

Understanding the user isn't just an exercise in psychology. You also need to 
estimate the users' technical proficiency because it can have a major impact 
on your site. Consider these issues for the typical user: 



♦ Whether the user has broadband access: University students, hard-core 
gamers, and Web developers often have high-speed Internet access, so 
they don't mind a page with lots of video, multimedia assets, and large 
file sizes. (In fact, they may expect a page like this.) Lots of people still 
use dialup connections. If your audience has slower connections, every 
image creates a delay. Audio and video assets are completely unavail- 
able to this group — and even make your site unattractive to them. 

♦ Whether the user has a recent browser: You have no way to predict 
which browser a user has, but think about whether your target audience 
has a reason to install any of the current browsers. By and large, grand- 
mothers use whichever browsers were on their machines when they 
purchased them. (1 do know some L337 H@XX0R grandmas, however.) If 
most people in your audience are still using the AOL browser — believe 
it or not, it's still used a lot — using advanced CSS and JavaScript tricks 
on your page may not be the best choice. 

♦ Whether the user has a recent computer: As technical people, we tend 
to assume that everyone else keeps up-to-date on technology. That's not 
necessarily an accurate assumption. 

♦ Whether the user has certain proficiencies: If you include a Flash ani- 
mation, for example, the user might not have the right version of Flash 
installed. You have to decide whether it's reasonable to expect the user 
to install a plugin. 



This process isn't about stereotyping, but you must consider the user as 
you're building a site. You want to match users' expectations and capabili- 
ties, if possible. 

Of course, you're making assumptions here, and you may well be wrong. I 
once did some work for a club for retired faculty members, and I based my 
expectations on their being retired. I should have based my assumptions on 
their being professors. And they let me have it! Be willing to adjust your 
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expectations after you meet real users. (For professional work, you must 
meet and watch real users use your site.) 

ite Plan 

Often, the initial work on a major site involves creating a plan for the site 
design. I like to do this step early because it helps me see the true scope of 
the project. A site plan is an overview of a Web site. Normally, it's drawn as a 
hierarchy chart. 

I was asked to help design a Web site for an academic department at a major 
university. The first question I asked was, "What do you want on the Web 
site?" I wrote down everything on a whiteboard, with no thought of organiza- 
tion. Figure 2-1 shows a (cleaned-up) version of that sketch. 
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Figure 2-1: 

We need a 
lot of stuff 
on this site. 
Good grief! 
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For all the sketches in this chapter, I used Dia, the open-source drawing tool. 
An excellent tool for this kind of work, it's included on the CD-ROM so that 
you can play with it. 

After all participants suggested everything they thought their site needed, I 
shooed them out of the room. Using only paper and pencil, I created a more 
organized sketch based on how / thought the information should be organ- 
ized. My diagram looked like the one shown in Figure 2-2. 
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Figure 2-2: 

This chart 
shows an 
organized 
represen- 
tation of the 
data. 
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Creating a site overview) 

Keep these suggestions in mind while creating a site overview diagram: 

♦ Use the Law of Seven. This law suggests that people generally can't 
handle more than seven choices at a time. Try not to have more than 
seven major segments of information at any level. Each of these can be 
separated into as many as seven chunks, and each of these can have 
seven chunks. 

Note: Even this book uses the Law of Seven! (Well, sorta — this book has 
eight minibooks.) The monster you're holding is too intimidating to look 
at as just one book, but if you break it into smaller segments, it becomes 
easier to manage. Clever, huh? 

♦ Identify commonalities. As you look over the data, general groupings 
emerge. In the university example, I could easily see that we had a lot of 
course data, degree information, information about faculty, and research. 
I wanted to consider a few other topics that didn't fit as well, until I real- 
ized that they could be grouped as events and opportunities. 

♦ Try to assign each topic to a group. If you read Book VI already, you 
probably recognize that I'm doing a form of data normalization here. 
This data structure isn't necessarily a formal one, but I'm using the same 
sort of thinking, so it could be. Clearly, I'm using the principle of func- 
tional dependency. 
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♦ Arrange a hierarchy. Group the topics from most general to most spe- 
cific. For example, the term course info is very broad. N100 is a specific 
se, and it may have many sections (specific date, time, and instruc- 
ombinations). Thus, it makes sense to group sections under N100 
and to group N100 under courses. 

Provide representative data. Not every single scrap of information is 
necessary here. The point is to have enough data so you can see the 
relationships among data. 

Keep in mind that this diagram does not represent the site design. 

When I showed this diagram to people, many assumed that 1 was setting 
up a menu structure, and they wanted a different kind of organization or 
menu. That's not the point yet. The purpose of this type of diagram is to 
see how the data itself fits together. Of course, it usually turns out to 
reflect the page setup and the menu structure, but it doesn't have to. 

Not each box is a page. It might be, but it doesn't have to be. Later in 
the process, you can decide how to organize the parts of the site. For 
example, we decided to put all sections of N100 on one page with the 
N100 information using AJAX. 



Building this sort of site diagram is absolutely critical for larger sites, or else 
you never really grasp the scope of the project. Have the major stakeholders 
look it over to see whether it accurately reflects the information you're 
trying to convey. 



Building the site diagram 

The site diagram is a more specific version of the site overview. At this point, 
you make a commitment about the particular pages you want in the system 
and their organizational relationship. Figure 2-3 shows a site diagram for the 
department site. 

The site diagram is a bit different from the overview, for these reasons: 

♦ Each box represents a page. Now, you have to make some decisions 
about how the pages are organized. Determine at which level of the 
overview you have separate pages. For example, are all the course sec- 
tions on one page, or all the sections of N100? Does each section of each 
course have a different page? These decisions will help you determine 
which technologies to use in constructing the page. 

♦ The site diagram still doesn't need every single page. If you have 30 
classes, you still don't need to account for each one, as long as you 
know where they go and that they all have the same general purpose 
and design. 



Book VIM 
Chapter 2 



7s 

■8 ? 

CO -■ 

o <= 

- £ 

CD 3 



838 Building a Site Plan 



Department Site Plan 
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Figure 2-3: 

Now, you 
have a site 
diagram 
for the 
department 
site. 
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♦ The navigation structure should be clear. The hierarchy should 
give you a clear navigation structure. (Of course, you can, and often 
should, add a secondary navigation structure. See the sidebar "Semantic 
navigation.") 

♦ Name each box. Each page should have a name. These box names trans- 
late to page titles and help you form a unified title system. This arrange- 
ment is useful for your navigation scheme. 

♦ Identify overall layout for each box. Generally, a site uses only a few 
layouts. You have a standard layout for most pages. Often, the front page 
has a different layout (for news and navigation information). You may 
have specialty layouts, as well. For example, the faculty pages all have a 
specific layout with a prominent image. Don't plan the layout here — 
just identify it. 

♦ Sort out the order. If the order of the pages matters, the site diagram is 
the place to work it out. For example, I organized the degrees from 
undergraduate to PhD programs. 
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'en popular in Web design 
circles is the notion of semantic navigation, 
where you set up your menu structure so that it 
reflects the jobs people are trying to do, rather 
than reflect the hierarchy of your sites. 

This idea is a good one that can be quite help- 
ful if done properly, but don't try to set up your 



entire site this way because it involves too 
much duplication of data. Instead, set up your 
site in a normalized way, and then put another 
menu system on your site that allows users to 
choose the section of the site they want based 
on problems they're trying to solve. Then, you 
create the best of both worlds. 



The goal for this part of the site-planning process is to have a clear under- 
standing of what each page requires. This information should make it easy 
for you to complete the data and visual design steps. The site diagram is an 
absolutely critical document. After you have it approved, print it and tape it 
to your monitor. 



Creating Page Templates 

If you've developed a site diagram, you should have a good feel for the over- 
all requirements of the Web development project. You should know how 
many layouts you need and the general requirements for each one. Your next 
task is to think about the visual design. Here are some guidelines: 

♦ Get help if you need it. Visual design is a skill that requires insight and 
experience. If you "design like a programmer" (I sure do!), don't be afraid 
to get help from a person who has design sensibility. You still need to 
translate the design into code, however. 

♦ Identify unifying design goals. All pages on the site have certain char- 
acteristics in common. Find out the overall color scheme, whether you Book VIII 
will have a logo, and whether all pages will have the same header and Chapter 2 
retain the same fonts throughout. 

♦ Identify a primary layout. Generally, a Web site requires one major -o 
layout that's repeated throughout the site. Often, the main page does <=> o 
not use this primary layout, but most internal pages do. Determine, for £ 5' 
example, which broad design elements can be shared by most of the Jj'S, 
pages, whether every page has a headline, whether you need columns, {§■' § 
and how important images are. w 

♦ Identify specialty designs. The main page is often a bit different from 
the other pages because it serves as an overview to the site. Likewise, if 
you have a certain kind of page that will be repeated (the course pages 
and faculty pages in my university example), you have to know how 
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these designs differ from the primary layout. Keep design elements as 
consistent as you can because unity makes your job easier and ties the 
,te pages together. 
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Sketching the page design 



Do not write even a single line of code before sketching out some design 
ideas. Figure 2-4 shows a page sketch for my sample site. 



Figure 2-4: 

Here's a 
sample 
sketch for 
the standard 
template on 
this site. 
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Your page sketch gives you enough information to create XHTML and CSS 
code. It needs to start showing some detail, such as the following details: 

♦ Draw out each element on the page. Any major page element (head- 
lines, menus, columns) must be delineated. 
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Include the class or ID identifier for each element. If you have a seg- 
ment that will be used as a menu, name it "menu," for example. If you 
a content area, identify that name now. Write all names directly on 
iagram so that you're clear about what belongs where. 



Include all relevant style information. Describe every font, the width of 
every element (including measurement units), the foreground and back- 
ground colors (with hex codes), the background images (including 
sizes), and anything else you might need in order to code CSS styles for 
the page. 

♦ Build a page sketch following these guidelines for each page template 
in your site. If you have three page designs, for example, you need three 
separate diagrams. 

These diagrams are finished only if they give you everything you need to 
build the XHTML and CSS templates. The idea is to do all your design work 
on paper and then implement and tweak your project with code. If you plan 
well, the coding is easy. 

The design sketch isn't a page mock-up. It's not meant to look exactly like 
the page. Instead, it's a sketch that explains with text all the various details 
you need to code in XHTML and CSS. Often, designers produce beautiful 
mock-ups that aren't helpful in development because you need to know sizes 
and colors, for example. If you want to produce a mock-up, by all means do 
so, but also make a design sketch that includes things like actual font names 
and hex color codes so that you can re-create the mock-up with live code. 



Building the XHTML template fmmertork 

With a page layout in place, you can finally start writing some code. Begin 
with your standard page layout diagram and create an XHTML template to 
implement the diagram in working code. The XML template is quite simple 
because most of the design should happen in the CSS. Keep these guidelines 
in mind: 

Book VIII 

♦ Remember that the template is simply a framework. The XHTML is Chapter 2 
mainly blank. It's meant to be duplicated and filled in with live data. 

♦ It has a reference to the style sheet. External CSS is critical for large -a 

Web projects because many pages refer to the same style sheet. Make a <g o 

reference to the style sheet, even though it may not actually exist yet. " 5" 

o to 

♦ Include all necessary elements. The elements themselves can be blank, §" 
but if your page needs a list for a menu, add an empty list. If you need a $ 3 
content div, put it in place. 

♦ Create a prototype from the template. You use the template quite a bit, 
but you need sample data in order to test the CSS. Build a prototype 
page that contains typical data. The amount of data should be typical of 
the actual site so that you can anticipate formatting problems. 
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It's very possible that you'll never manually put code in your template. 
_There are several options for automating this process, which can be found in 
ter 4 of this minibook. 



The XHTML template should be easy to construct because everything you 
need is in the page template diagram. Figure 2-5 shows an XHTML prototype. 



Figure 2-5: 
An XHTML 

prototype 
for my site 
(with no 
CSS 

attached 
yet). 
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Here's the XHTML code for my prototype: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http: //www.w3 .org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-tYpe" content="text/xml; charset=utf -8 " /> 
<title>CS Standard Template</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "csStd.css" /> 

</head> 

<body> 

<div id = "all"> 

<!-- This div centers a fixed-width layout --> 
<div id = " heading "> 

<hl>Heading</hl> 
</div><!-- end heading div --> 
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<div id = "menu"> 
menu 
<ul> 

<li><a href = " ">one</a></li> 
<li><a href = " ">two</ax/li> 
<li><a href = " ">three</a></li> 
</ul> 

</div> <!-- end menu div --> 



<div class = " content "> 
<h2>Content l</h2> 

One or more of these will contain content 

One or more of these will contain content 

One or more of these will contain content 

One or more of these will contain content 

One or more of these will contain content 

One or more of these will contain content 

One or more of these will contain content 

One or more of these will contain content 

</div> <!-- end content div --> 

<div class = " content "> 



<h2>Content 


2</h2> 
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</div> <!-- end content div 

<div id = " footer "> 

contact and footer info 
</div> <!-- end footer div - 
</div> <!-- end all div --> 
</body> 
</html> 



People commonly start writing pages at this point, but that's a dangerous 
idea. Don't use any real data until you're certain of the general XHTML struc- 
ture. You can always change the style later, but if you create 100 pages and 
then decide that each of them needs another <div> tag, you have to go back Book VIII 
and add 100 divs. Chapter 2 

Creating page styles 

With an XHTML framework in place, you can start working on the CSS. The 
best way to incorporate CSS is by following these steps: 

/. Begin with the page template diagram. 

It should have all the information you need. 
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2. Load your XHTML prototype into Firefox. 

Nothing beats Firefox with the Web Developer CSS editor for CSS design 
^^cause it lets you see your changes in real time. Honestly, you can use 
cfny browser you wish, but if you use another browser, you'll need to 
create the CSS file in a text editor and check it frequently in the browser. 
(Check Books II and III to see how FireFox and Web Developer simplify 
this task.) 

3. Implement the CSS from your diagram. 

You should be implementing the design you already created, not design- 
ing the page. (That already happened in the diagramming process.) 

4. Save the design. 

If you're using the Web Developer CSS editor, you can save your CSS 
directly into a file. If your XHTML template had an external style defini- 
tion, this is the default save file. If you're editing CSS in a text editor, 
save it in the normal way so the browser will be able to read it. (See 
Book II for information on implementing external style sheets.) 

5. Test and tweak. 

Things are never quite what they seem with CSS because browsers don't 
conform to standards equally. You need to test and tweak on other 
browsers, and you probably have to write a secondary style for IE 
exceptions. 

6. Repeat for other templates. 

Repeat this process for each of the other templates you identified in 
your site diagram. 



The result of this process should be a number of CSS files that you can read- 
ily reuse across your site. 



Here's the CSS code for my primary page: 

body { 

background-color: #000000; 

} 

#all { 

background-color: white; 
border: Ipx solid black; 
width: 800px; 
margin-top: 2em; 
margin-left: auto; 
margin-right: auto; 
min-height: 600px; 

} 



#heading { 

background-color: #A112 04; 
color: #FFFFFF ; 
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ladding- 

)pbOQfe 



height: lOOpx; 
font-size: 2em; 
adding-lef t : lem; 

ottom: 3px solid black; 
op: -1.5em; 



tmenu { 

background-color : #A11204 ; 
color: #FFFFFF; 
float: left; 
width: lOOpx; 
min-height : 500px; 

} 

#menu li { 

list-style-type : none; 
margin-left : -2em; 
margin-right : . 5em; 
text-align: center; 

} 



tmenu a { 

color: #FFFFFF; 

display: block; 

border: #A11204 3px outset; 

text-decoration : none ; 

} 

#menu a: hover { 

border: #A11204 3px inset; 

} 



content { 
border: 3px double #A112 04; 
margin: lem; 
margin-left : llOpx; 
padding-left : lem; 
padding-bottom: lem; 
padding-right: lem; 



content h2 { 
background-color : #A112 04 ; 
color: #FFFFFF; 
text-align: right ; 



#footer { 

color: #FFFFFF; 
background-color: #000000; 
border: Ipx solid #A112 04; 
float: left; 
clear: both; 
width: 100%; 
text-align: center; 



Figure 2-6 shows the standard template with the CSS attached. 
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Figure 2-6: 
The XHTML 
template 
looks good 
with the 
CSS 

attached. 
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Building a data (rameutork 



The examples throughout this chapter assumed that a large Web project can 
be done in straight XHTML and CSS. That's always a good starting point, but if 
your program needs data or interactivity, you probably have a data back end. 

Most data-enabled site plans fail. 

The reason is almost always that the data normalization wasn't incorporated 
into the plan early enough, and the other parts of the project inevitably 
depend on a well-planned data back end. 



If you suspect your project will involve a database, you should follow these 
steps early in the process (during the early site-planning phase): 

7. Identify the true data problem to be solved. 

Data gets complicated in a hurry. Determine why exactly you need the 
data on the site. Keep the data as simple as you can, or else you'll 
become overwhelmed. 

2. Identify data requirements in your site diagram. 



Find out where on the site diagram you're getting data. Determine which 
data you're retrieving and record this information on the site diagram. 
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3. Create a third normal form ER diagram. 

Don't bother building a database until you're sure that you can create an 
iagram in third normal form. Check Book VI, Chapter 3 for details on 
process. 

it. Implement the data structure. 

Create an SQL script that creates all the necessary data structures 
(including tables and views) and includes sample data. 

5. Create PHP middleware. 

After the database is in place, you usually need PHP code to take 
requests, pass them to the database, and return the results. Most of the 
PHP code for the main site consists of simple queries from the database. 
If you can use AJAX or SSI, it simplifies the process because your PHP 
code doesn't have to create entire pages — it simply creates snippets 
of code. 

See Chapter 4 of this minibook for help on implementing these 
technologies. 

6. Consider update capabilities. 

Usually, when you have a database, you need another part of the site to 
allow the client to update information. It's often an administrative site 
with password access. An administrative site is much more complex 
than the main site because it requires the ability to add, edit, and update 
records. 
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If you completed all the steps in the preceding section, it becomes relatively 
easy to create the page: It's simply a matter of forming the copy into the tem- 
plates you created, tying it all together, and launching on the site. 



Book VIII 



Making the site iiVe chapter 2 

Typically, you do the primary development on a server that isn't in public 
view. Follow these steps to take the site to production: 



?3 

S ? 

CO -■ 

o <= 

- 2 



/. Test your design. 

Do some usability testing with real users. Watch people solve typical _ 
problems on the site and see what problems they encounter. $ 3 

2. Proofread everything. 

Almost nothing demolishes credibility as quickly as sloppy writing. Get a 
quality proofreader or copy editor to look over everything on the site to 
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check for typos and spelling errors. Have another expert check the site 
for factual or content errors. 



epare the online hosting environment. 

Be sure that you have the server space to handle your requirements. 
Make a copy of your database and test it. Check the domain name to be 
sure that you have no legal encumbrances. 

If. Move your site online. 

Move the files from your development server to the main server. 

5. Test everything again. 

Try a beta test, where your page is available to only a few people. 
Get input and feedback from these testers and incorporate the best 
suggestions. 

6. Take a vacation. You earned it! 



Contempiatinq efficiency 

As you start working with the site, you'll probably encounter repeated code. 
For example, each page may have exactly the same title bar. You obviously 
don't want to write exactly the same code for 100 different pages because it 
might change, and you don't want to make the change in 100 different 
places. You have three major options in this case: 



♦ Use AJAX to import the repeated code. Follow the AJAX instructions in 
Chapter 4 of this minibook to import your header (or other repeated 
code). 

♦ Use Server-Side Includes (SSI) to import code on the server. If your 
server allows it, you can use the SSI technology to import pages on the 
server without using a language like PHP. SSI is explained in Chapter 4 of 
this minibook. 

♦ Build the pages with PHP. Put all segments in separate files and use a 
PHP script to tie them together. When you do this, you're creating a con- 
tent management system, which is the topic of Chapters 3 and 4 of this 
minibook. 



Chapter 3: Introducing Content 
mStaaement Systems 



In This Chapter 

W Understanding the need for content management systems 

Previewing typical content management systems 
f Installing a content management system 

V Adding content to a content management system 
v 0 Setting up the navigation structure 

w Adding new types of content 

V Changing the appearance with themes 

f 

■ f you've ever built a large Web site, you'll probably agree that the process 
*S can be improved. Experienced Web developers have discovered the fol- 
lowing maxims about larger projects: 

♦ Duplication should be eliminated whenever possible. If you find your- 
self repeatedly copying the same XHTML code, you have a potential 
problem. When (not if) that code needs to be changed, you have a lot of 
copying and pasting to do. 

♦ Content should be separated from layout. You've already heard this 
statement, but it's taken to a new level when you're building a large site. 
Separating all content from the layout would be helpful so that you 
could create the layout only one time and change it in only one place. 

♦ Content is really data. At some point, the content of the Web site is 
really just data. It's important data, to be sure, but the data can — and 
should — be separated from the layout code, and should be, if possible. 

♦ Content belongs to the user. Developing a Web site for somebody can 
become a long-term commitment. If the client becomes dependent on 
the site, he frequently pesters you for changes. It would be helpful if the 
client could change his own content and ask you only for changes in 
structure or behavior. 

♦ A Web site isn't a collection of pages — it's a framework. If you can 

help the client own the data, you're more concerned with the frame- 
work for manipulating and displaying that data. It's a good deal for you 
and the client. 
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A content management system (CMS) is designed to address exactly these 
issues, as this chapter will show you. 
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CMSs are used in many of the sites you use every day. As you examine these 
CMSs, you start to recognize them all over the Web. If you have your own 
server space, a little patience, and a little bit of knowledge, you can create 
your own professional-looking site using a CMS. 

This list describes the general characteristics of a CMS: 

♦ It's written in a server-side language. The language is usually PHP, but 
CMSs are sometimes written in other languages. Stick with PHP for now 
because it's described in this book, it's easy to use, and it's the most fre- 
quently used CMS language. 

♦ All content is treated as data. Almost all the content of the CMS is 
stored in text files or (more commonly) a MySQL database. A CMS usu- 
ally has few HTML files. 

♦ The layout consists of data, too. The CSS and XHTML templates, and 
everything else the CMS needs, are also stored as data, in either text 
files or the database. 

♦ All pages are created dynamically. When a user logs in to a CMS, she is 
normally talking to a PHP program. This program analyzes the current 
situation and generates an HTML document on the fly. 

♦ There are different levels of access. Most CMSs allow anonymous 
access (like regular Web pages) but also allow users to log in for 
increased access. 

♦ The content can be modified from within the system. Users with the 
appropriate access can modify the content of the CMS without knowing 
anything about PHP or databases. Often, you don't even need HTML 

or CSS. 

♦ The layout can be often modified from within the system, too. Most 
CMSs allow you to change the layout and design from within the system, 
although the process is usually more involved. 

♦ CMSs can be expanded. Most CMSs are easily modified with hundreds 
of visual themes, add-in modules, and new capabilities available for free. 
In most cases, if you need something that isn't there, you can make it 
yourself. 

♦ Many of the best CMSs are open source. CMSs are a shocking value. 
When you consider how much they can contribute to your online pres- 
ence, it's amazing that most CMS programs are absolutely free. 
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rue feel for the power of CMSs, you should test-drive a few. The 
1 resource www . opensourcecms . com allows you to log in to hun- 
dreds of different CMSs as a user and as an administrator to see how they 
work. I show you a few typical CMSs so that you can get a feel for how they 
work. 



Moodle 

Often, you have a special purpose in mind. For example, I wanted to teach an 
online course without purchasing an expensive and complicated course 
management system. I installed the special-purpose CMS Moodle. Figure 3-1 
shows the Moodle screen for one of my courses. 

Moodle has a lot of features that lend themselves to the educational setting: 

♦ Student and instructor management: The system already understands 
the roles of student and instructor, and makes appropriate parts of the 
system available. 

♦ Online assignment creation and submission: One of the biggest prob- 
lems with online courseware is getting assignments to and from stu- 
dents. Moodle has a complete system for handling this problem. 
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Now that you can move sprites around learn how to approximate nature 
better Manage arbitrary direction, speed gravity drag and acceleration 
more realistically. We'll even cover basic orbital physics! 
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Figure 3-1: 

Moodle is 
useful for 
managing 
online 



Building a Game Engine 

Learn how to use and expand the game Engine - a tool to simplify building 
games Focus on how game engine works but also how to build a library 
including a simple GUI widget set 
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♦ Online grade book: When a teacher grades an assignment (online 
through Moodle), the student's grades are automatically updated. 

Online testing support: Moodle has built-in modules for creating, man- 
aging, and scoring online quizzes and exams. 

♦ Communication tools: Moodle includes a wiki (a collaborative documen- 
tation tool), online chat, and forum tools you can set up for improved 
communication with your students. 

♦ Specialized educational content: Moodle was put together by hundreds 
of passionate (and geeky) teachers, so it has all kinds of support for var- 
ious teaching methodologies. 

Community-created software can be very good (as Moodle is) because it's 
built by people who know exactly what they want, and anybody with an idea 
(and the skills to carry them out) can add or modify the features. The result 
is an organic system that can often be better than the commercial offerings. 




I personally find Moodle easier to use and more reliable than the commercial 
course management system that my university uses. I keep a Moodle backup 
for my classes because, when the "official" system goes down, I can always 
make something available for my students. 



WordPress 

WordPress is another specialty CMS, meant primarily for blogging (short for 
Weft logging, or keeping an online public diary). WordPress has become the 
dominant blogging tool on the Internet. Figure 3-2 shows a typical WordPress 
page. 

WordPress takes one simple idea (blogging) and pushes it to the limit. 
Unregistered users see the blog output, but if you log in, you gain access to a 
complete set of tools for managing your online musings. 

Figure 3-3 illustrates the administrator view of WordPress. 

Of course, you can change the layout and colors, add new templates, and do 
much more, as you would do in a more traditional CMS. 

Of course, hundreds of other specialized CMSs are out there. Before you try 
to build your own CMS from the ground up, take a look at the other available 
offerings and see whether you can start by using the work of somebody else. 



DropBook 



Previewing Common CMSs 853 



DropBooks 



Figure 3-2: 

Woot! I'm 
blogging! 
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WordPress 



Welcome to WordPress 



Wordpress is a CMS for bloggers. If you're serious about blogging, you 
know that the software you use can make your life easier or more 
difficult. 

Wordpress has become a popular too! for senous bloggers, because it 
helps you create visually appealing blogs and does most of the work 
for you. Vou can concentrate on wnting. 

Posted in Uncategorized | Edit ] No Comments * 



Hello world! 

October 22nfl 2007 



Welcome to WordPress. This is your first post. Edit or delete it, then 
start blogging! 
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Figure 3-3: 

You can 
easily get 
started 
with Word- 
Press — 
just start 
writing. 
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Welcome to WordPress 



Post 

<p> 

Wordpress is a CMS for bloggers. If you're senous about blogging, you know that the software you 
use can make your life easier or more difficult. 

</p> 
<P> 

Wordpress has become a popular tool for serious bloggers, because it helps you create visually 
appealing blogs and does most of the work for you. You can concentrate on writing. </p> 







Add 










0 Uncategoriz 





Tags (separate multiple tags with commas: cats, pet food, dogs) 



Save and Continue Editing Save 




kjjj 7 errors / 0 warnings Q 3 Errors & teboo: <9 'lov: Overcast. -t9 : F _> Sat: 55= F . 5un: 39 : F * 



Book VIII 
Chapter 3 



"S 3 2. 

2 CD CO 

i 3 " 

<" a o 



854 Previewing. Common CMSs 



bmpat 

|""N ["^ iDruoal is one of the most popular multipurpose CMSs out there. Intended for 

I | IJ fj f] (j (j sites, it's more involved than the specialty CMSs — although it can do 

vJ^L^V/V 'affiMt anything. 

Figure 3-4 shows a basic site running Drupal. 

Drupal is meant to be community Web sites. It is commonly used in the fol- 
lowing types of sites: 

4- Gaming sites: Many game communities are based around a CMS like 
Drupal because it allows opportunities for users to share information, 
opinions, news, and files. 

♦ Software sites: A CMS like Drupal is an ideal place to post information 
about your software, including downloads, documentation, and user 
support. 

♦ Forums: Although you can find many dedicated forum packages, Drupal 
supports several good forum sites. 

♦ Blogging: You can also use Drupal as a news site and place to post your 
blog. You can add community features as you want or need them. 



Figure 3-4: 

Drupal is 
intended to 
support 
online 
commu- 
nities. 
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► Create 


content 


Demonstrate use of Drupal as part of a larger book on web development. 
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Welcome to Drupal 












Drupal is a multi-purpose content management svstem. It s a little more complex than some of the more purpose-built systems, but 
it's capable of more. 








You can use Drupal in manv ways; 






■ 






• As a portal for an online community 

• As an enhanced blogging platform 

• As a support page for a community, software 


project, or event 










Drupal has a huge community of module and theme 
its behavior and appearance 


developers, and has hundreds of free add-on components you can use to change 








Content Maiiaqement System 

Get all functionality necessary to create deploy, & 
manage your site 

BcBor ■ 


Drupal is a free and open source modular content management system (CMS) 
written in the programming language PHP. A CMS is a tool used by Web 
administrators to automatically track online visitors and prepare customized 
content for consumption, usually as HTML-based Web pages. Drupal, like many 
modern CMSs, allows the system administrator to customize the content and 
display of the Web site with little or no programming. 








Easv Content Management 

Non-technical users Add Modify & Publish Website 
Content Free Demo 


Drupal runs in many environments, including Windows, Mac OS X, Linux, 
FreeBSD, and any platform that supports either the Apache (version 1.3+), or 
IIS (version 1155+) Web server and the PHP language (version 4.3.3+). Drupal 
requires a database such as MySQL or PostgreSQL to store content and 
settings. 
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As you experiment with Drupal (in upcoming sections of this chapter) and 
look over its themes, you'll probably recognize it or one of its cousins as the 
n of many of your favorite sites. 



DropBodKsr 

Installing a Content Management System 




Content management systems usually require both PHP and MySQL access. 
Installing a CMS usually involves following these steps (I'm using Drupal on 
my localhost as an example, but the concept is much the same for all CMSs): 

7. Download the CMS files. 

Most CMSs are in plain PHP form, so they're multiplatform. In this exam- 
ple, I use Drupal 5.5, but other versions are similar. 

2. Copy the files to your htdocs path. 

Usually, you need to put the various files in a subdirectory of htdocs 
because the CMS is a Web application. Check for any installation notes 
that come with the CMS. If it has none, simply drag the entire directory 

to htdocs. 

3. Access the CMS through the server. 

Use your browser to point to the CMS main page. (Don't forget to use a 
localhost reference so the program runs through your server.) Normally, 
if a CMS hasn't yet been initialized, you get some sort of database 
prompt, like the one shown in Figure 3-5. 

4. Create a MySQL database. 

CMSs often require a MySQL database. If possible, create a new database 
for each CMS to avoid table name conflicts. Make a database with a user 
and password. See Book VI, Chapter 1 for information on creating data- 
bases and users. Remember your database name, username, and pass- 
word. In Figure 3-6, I'm creating a database, user, and password for 

Dru P al " Book VIII 

It's a common occurrence to create a username and database name that Chapter 3 

are the same. If you're on a remote server, you may find restrictions on _ 
creating the database name. 

3 3 

If you set up a new user in phpMyAdmin (the Privileges table), you can ,g> 2j = 

also have phpMyAdmin set up a database with the same name and - <= jjj' 

assign the new user rights for only that database using the Database for | 3 o 

User panel (shown in Figure 3-6). That's exactly what you want to S = 

happen. = 
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Figure 3-5: 

The CMS 
complains 
if you 

haven't yet 
connected 
to a data- 
base. 
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Database configuration 



To set up your Drupal database, enter tlie Mowing information. 

Database type: * 

0 mysqi 
O mysqli 

The type of database your Drupa! data will be stored ra. 
Database name: * 



..eg 



HE EE 



The name of the database your Drupal data will be stored in. It n 
Database username: " 



it on your server before Drupal can be instated 



Database password: 
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Figure 3-6: 

Use phpMy- 
Admin to 
set up the 
required 
database. 
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Database 



g3 Server: localhost 
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i Add a new User 

-Login Information 



Username: Use text field 



[y]| dmpal 



Host: use text field 



- localhost 



Password: Use text field 
Re-type: 



0 



Generate I Generate 1 1 Copy I 
Password: 1 ' 1 ^ 



r Database for user- 



O None 

B Create database with same name and grant all privileges 
O Grant all privileges on wildcard name (username_%) 



-Global privileges ( Check All / Uncheck All ) 

Note: MySQL privilege names are expressed in English 



0 errors /0 warnings Adblock 0. No/:; Overcast. -W ; F O Sat; 56 : F . Sun:39 : F % 



Installing a Content Management System 857 




jjttNG/ Do not set up a CMS to use the root database user, especially if you 

haven't set up a root password. The results can be disastrous because 
pody using the CMS can potentially destroy all your databases, 
t's a bad thing!) 

5. Specify the database, username, and password. 

Go back to the CMS site and try to run the CMS again. Usually, the instal- 
lation script logs in to MySQL using the information you provided, and 
then it runs an SQL script to create all the various tables and joins 
required by that CMS. 

6. Run the installation script. 

Normally, the CMS runs a few more magical scripts, creating various files 
and directories, and changing permissions. You see a welcome screen 
indicating that the script was run successfully and an invitation to visit 
your new site, which looks like Figure 3-7. 

7. Create an administrator login. 

There's usually some way to create an administrative account. The tech- 
nique for creating an admin account varies from system to system. In 
Drupal, the first account you create is automatically an admin account. 
Create a username and password for this account, as shown in Figure 3-8. 



& Drupal - Mozilla Firefox 



Figure 3-7: 

Congratu- 
lations! 
You're the 
proud 
parent of a 
bouncing 
baby CMS! 
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Drupal 



User login 



Password: 



| i j ■ | 

Create new account 
Request new password 



Welcome to your new Drupal website! 

Please follow these steps to set up and start using your website: 

1. Create your administrator account 

To begin, create the first account. This account will have full administration rights and will allow you to 
configure your website. 

2. Configure your website 

Once logged in, visit the administration section, where you can customize and configure all aspects of 
your website. 

3. Enable additional functionality 

Next, visit the module list and enable features which suit your specific needs. You can find additional 
modules in the Drupal modules download section. 

4. Customize your website design 

To change the "look and feel" of your website, visit the themes section. You may choose from one of the 
included themes or download additional themes from the Drupal themes download section. 

5. Start posting content 
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Figure 3-8: 

CMSs 
almost 
always have 
a special 
admin 
account. 
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LOfl in Request new password 



admin 



E-mail address: ' 

andy® aharrisbooks.net 



| create r-e .-. 3 : : ju: - : | 



jv 0 errors / 1 warrmg Q tfr Mfack £| Nov.; Overcast, 49* F .^1 Sat: 56' F ,^\\ Sure ^ 



The admin login is different from the database login. The database user 
is used by the CMS. You don't use this (database) account directly, but 
it's stored in the CMS data. You use the admin account to make changes 
to the database. 

5. Test the installation. 

You should be able to test the installation by logging back in to the CMS 
main directory. This time, rather than see the installation screen, you 
should see the guest access screen. 




Adding content 

Before you can do anything interesting with a CMS, you need to dig around 
to see how things work. Follow these steps to define some structure and add 
various types of content: 

/. Log in as the administrator. 

Use your new admin account to log in to the system. You need to be the 
administrator to change content. Figure 3-9 shows the default screen for 
Drupal administration. 
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Figure 3-9: 

The admini- 
stration 
screen for 
Drupal is 
functional. 
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Content management 
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Welcome to the administration section. Here you may control how your site functions. 



One or more problei 
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were detected with your Drupal installation. Check the status report for more 



Hide descriptions 
Content management 



Site building 

Control how your site looks and feel 
Blocks 

Configure what block content ape 
sidebars and other regions. 

Menus 

Control your site's navigation me 
and secondary links, as well as n 
reorganize menu items. 



modules for your site. 



Themes 

Change which theme y 
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In this installation, Drupal lets me know that I didn't configure an e-mail 
server (a program that sends e-mail) properly. That's because I'm run- 
ning this test installation on my personal machine, and I'm not running 
an e-mail server. 

2. Find the "create content" tool. 

Most CMSs have a tool that allows you to create content. In Drupal, it's 
the Create Content link, which is available if you log in as administrator. 
Clicking this link displays a screen like the one shown in Figure 3-10. 

3. Create a new page by choosing Page from the simple menu shown in 
Figure 3-10. 

Drupal offers hundreds of types of content, but the two main ones are 
stories and pages. Begin by making a new page. You see a page like the 
one shown in Figure 3-11. 

Note that you're allowed to use XHTML tags in your pages. Different 
CMSs have different rules about how much control you have over con- 
tent. Drupal lets you choose how much control you want to have, from 
automatically creating all XHTML code for you to allowing you to write 
the code by hand. 
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Figure 3-10: 

Building 
content is a 
big part of 
using a 
CMS. 
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Create content 

Choose the appropriate item from the list: 
Page 

If you want to add a static page, like a contact page or 



1 about page, use a page. 



Stones are articles in their simplest form: thev have a title, a teaser and a body, but can be extended by 
other modules. The teaser is part of the body too. Stones may be used as a personal blog or for news 
articles. 



i/l warning Q -Jj Adblod 



i'i Overcast, -49° F ,<> Sat: 56= F Sun: 39= F ^ 



Submit Page 1 Drupal - Mozilla Firefox 



file Edit View History Bookmarks Tools Heb 



<^ * ^ - (j^ [t* http:(/localhost./*upal-5.5./'q-r»de/add./oage 



Drupal 



Figure 3-11: 

The page 
editor is the 
mainstay of 
all CMS 
work. 
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4. Submit the page. 

Use^the Submit button to commit this page to the database. At this 

't, it has been created, but you want it to be the new front page when 
eone enters the system. 

5. Promote your page. 

Click the Administration - Content Management link to see various 
options for pages. This page looks like Figure 3-12. 




Figure 3-12: 

You have to 
specify a 
page as the 
front page in 
Drupal. 
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Find the Content link and select it to see a page like the one shown in 
Figure 3-12. Select the page and choose Promote to Front Page from the 
drop-down list. Finally, click Update to update the page's settings. 

6. Click the title in the upper-left corner. 

In admin mode, this is a special link that lets you see how the page looks 
from a guest perspective. Now, your page is the front page of the CMS. 

Building a menu system 

You can add more pages easily. Just repeat the process: Be sure you're 
logged in as the administrator, navigate to the "Create content" page, and 
edit your new page. 
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When you have a lot of pages, you'll definitely want to add some sort of navi- 
gation system. When you create or edit a page, you can add it to Drupal's 
system. Figure 3-13 shows the menu settings for a new page. 

a page's place in the menu structure, follow these steps: 

/. Modify the menu settings. 

The page creation screen has a section called "Menu settings" (shown in 
Figure 3-13). 

2. Give the page a title. 

The page will be displayed in the menu only if it has a title. 

3. Provide a description for the page. 

The description text will automatically appear when you hover over the 
menu. This can be used to provide additional text to explain the page's 
contents. 

4. Specify a parent item. 

Typically, you'll use "content" for the parent because this will cause a 
link to appear on the primary navigation menu of the system. 
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Figure 3-13: 

Designate 
your page's 
place in the 
menu 
system. 
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5. Submit the page. 

UseJ:he Submit button to save changes to your page, 
the menu. 




Your page should now appear on the left-side menu, as shown in 
Figure 3-14. 

If you want to modify the menu placement of a page after it has been cre- 
ated, you can either edit the page (see the next section) or modify the 
menu structure itself. Menus can be modified through the Administer 
menu: Administer O Site building O Menus. 



Editing yow pages 



You may want to change a page once you've added it to the system. You can 
change the content to your heart's content if you're logged in as the adminis- 
trator. Here's how: 

/. Log in as the administrator. 

Only the administrator (or someone given special privileges by the 
administrator) can change the content of a page. 



Figure 3-14: 

Now, the 
new page 
(Third Page) 
shows in 
the menu 
structure. 
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2. Navigate to the Administer page. 



DropBooks 

1 



The administrator has access to a special menu item called 

dminister." Click this link to view the page shown in Figure 3-15. 



Drupal uses the word "administrate" in a lot of different ways. Here's the run- 
down: The administrator is a person with special privileges. The account you 
use as the administrator is sometimes called the admin account. When 
you're logged in as the administrator, you have access to a special page 
called the Administer page. 



Adding a new) content biock 

You may want to add a new type of content to your page. Drupal comes with 
several modules already, and you can choose from hundreds more. To begin 
by adding a poll, follow these steps: 

/. Log in as admin (if you haven't already). 

You'll change the site design again. 

2. Find the Modules page. 

It's in the Administer - Site Building section. You see a screen like the 
one shown in Figure 3-16. 
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Figure 3-15: 

The Admin- 
ister page 
allows you 
to modify 
various 
parts of the 
system. 
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Menus 



Add menu item 



Menus are a collection of links (menu items) used to navigate a website. The list(s) below display the currently 
available menus along with their menu items. Select an operation from the list to manage each menu or menu 
item. 
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No menu items defined. 
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Figure 3-16: 

You add a 
new module 
with the 
Modules 
page. 
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Modules 



Uninstall 



Modules are plugins for Drupal that extend its core functionality. Here you can select which modules are 
enabled. Click on the name of the module in the navigation menu for their individual configuration pages. Once 
a module is enabled, new permissions might be made available. Modules can automatically be temporarily 
disabled to reduce server load when your site becomes extremely busy by enabling the throttle. module and 
checking throttle. The auto-throttle functionality must be enabled on the throttle configuration page after 
having enabled the throttle module. 

It is important that update. php is run every time a module is updated to a newer version. 
You can find 3ll administration tasks belonging to a particular module on the administration by module page. 
" Core - optional 



Enabled Name 



Version Description 



Aggregator 5.5 
Blog 5.5 
Blog API 5.5 
Book 5.5 
Color 5.5 



Aggregates syndicated content (RSS, RDf, and Atom feeds). 

Enables keeping easily and regularly updated user web pages or blogs. 

Allows users to post content using applications that support XML-BPC blog 

APIs. 

Allows users to collaboratively author a book. 
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3- Look for the Poll module. 

The Poll module allows you to ask a question and track user responses 
to it. Select the Enabled check box for this module and click the Save 
Configuration button. 

4- Create a poll. 

A poll is interesting only if you ask a question. You find the poll configu- 
ration on the Create Content page, in the Submit Poll section (see 
Figure 3-17). 

5. Edit the poll. 

Click the Edit button to add a new poll. Chapter 3 

6. Display the Poll module. = 

<■ o 

Even though the Poll module is enabled, it hasn't been placed in the site. ^ » g- 
Use the Administer - Site Building - Blocks page, shown in Figure 3-18, to "!| S 2. 
make the poll visible. | » to 



7. Place the poll. 

The poll is listed in the Disabled block by default. Choose another place- 
ment for it by selecting from the drop-down list. I put the poll in the side- 
bar on the right. 
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Figure 3-17: 

Creating a 
new poll 
object. 
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Figure 3-18: 

Of course, 
you want 
the new poll 
to be visible. 
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If you want certain blocks to disable themselves temporanly dunng high 
server loads, check the "Throttle ' box. You can configure the auto-throttle on 
the throttle configuration page after having enabled the throttle module. 

You can configure the behaviour of each block (for example, specifying on 
which pages and for what users it will appear) by clicking the "configure" link 
for each block. 
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8. Test the poll. 

You want to see whether it looks the way you expect. Figure 3-19 shows 
site with the new poll in place. 



By default, users can create their own polls. You may want to disable this 
feature for anonymous users, or else you'll get spammed. 

Of course, the poll is not the only module available. Drupal has several inter- 
esting modules available to experiment with in the default package, with 
hundreds more available for free download. 

Almost all CMSs have plugin modules available. You can usually find a list of 
modules on the CMS's home page, or you can search for it at www. google . 
com. Of course, modules are usually nothing more than PHP code, so you 
can always write your own. 



Figure 3-19: 

I've added 
a new 
module! 
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This is mv first page written in Drupal. This is a powerful system. 
With perseverance, I should be able to completely master it. 
I am not dfrBid) 



SUB 




Poll 

What is the airspeed velocity 
of an unladen swallow?: 

O eighteen beats per minute 

O 4.7 km / second 

O African or European? 



rs / 1 warning O Adbtodc 



■i Overcast. 50= F 5a::5n : F Sjn: 39 : F '% 



Chanqinq the look 



You can easily change the look and feel of Drupal. It uses (like most CMSs) 
the concept of themes to organize the look and feel of a site. A theme is a 
prepackaged layout and visual display configuration. To try one of the other 
default themes, just go to Administer - Sitebuilding - Themes in Admin 
mode and select a new theme. 
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DropBooks 

as the 



You'll see a list of all the installed themes. Each theme can be enabled or dis- 
abled, and one theme can be set as the default theme. 



ng a theme makes it available for users to choose, and setting a theme 
as the default makes it the primary theme of your account. Figure 3-20 shows 
the site using the Pushbutton theme. 



Of course, you probably want more exciting options than the one in my 
example. Hundreds of themes are available, so you should find one that suits 
your needs. Follow these steps: 

/. Download a theme from the Internet. 

Nearly every CMS has a community of theme builders. Do a quick search 
for Drupal themes to find the theme you're looking for. Most Drupal 
themes are saved as Zip files containing a single directory. 

2. Copy the theme to the themes directory. 

I found an attractive theme, named Aberdeen, so I copied the entire 
directory found in the Zip file to the themes directory under the Drupal 
main directory. 



Figure 3-20: 

I changed 
the theme 
with one 
quick 
setting. 
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3. Refresh or re-navigate to the themes directory. 

If you're already in the themes directory, refresh the browser. If you're 
here, find the directory to see the new theme. 



4. Select the theme and test it. 

Figure 3-21 shows my Drupal site with the Aberdeen theme. It's amazing 
how easy it is to change the look and feel. 
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Figure 3-21: 

You can 
download 
themes 
easily to 
mostCMSs. 
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Home > Administer > Site building 

Themes 



Select which themes are available to your users and specify the 
default theme. To configure site-wide display settings, click the 
"configure" task above. Alternately, to override these settings in 
a specific theme, click the "configure" link for the corresponding 
theme. Note that different themes may have different regions 
available for rendering content like blocks. If you want 
consistency in what your users see, you may wish to enable only 
one theme. 
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Of course, you can also create your own themes. In most cases, the CMS 

themes are simply PHP files organized in a specific way Check the documen- Book VIII 

tation for your specific theme system. Chapter 3 
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In This Chapter 

W Using CMS Made Simple (CMSMS) 

Adding new pages in CMSMS 

Adding themes 
w Working with templates 

Approximating CMS with SSI and AJAX 
V Creating a CMS with PHP and MySQL 

7 he idea of a content management system (CMS) is very appealing because 
it gives you a great deal of additional control of your site and allows the 
user to manage his own content. Of course, when you use a content manage- 
ment system, you're somewhat at the mercy of that system's designers. In this 
chapter, I show you how to customize a relatively simple CMS, including 
adding new styles and layouts. 

I also show you several ways to approximate a CMS with your own code using 
technologies introduced throughout this book. Finally, I develop a rudimen- 
tary CMS using PHP and MySQL. Even if you don't end up building your own 
CMS, looking through this code helps you see how "real world" CMSs work. 



Getting Started u/ith CMSMS 

Content management systems are certainly useful, but it's no fun to be stuck 
with somebody else's design. You probably have your own design ideas 
you'd like to implement in the CMS. Of course, you can build new themes for 
any CMS, but that's not always as easy as you might think. You have to be 
comfortable with using most CMSs before you can write your own themes. 

I show you CMSMS (or CMS Made Simple), a CMS that's so simple you 
should be able to customize your site with it completely in just a couple of 
days. For small to medium-size projects, it's a good blend of simplicity and 
capability (and now my favorite CMS). 
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Instaliinq CMSMS 

j"^ |^ j"^ ^^^^ ta " ati ° n °^ ' S simi ' ar to any otner CMS installation. Follow 

/. Download the package from the CD-ROM (or get the latest version 
from the Web site). 



The CMS itself is mainly a series of PHP files with a few images and other 
materials. 

2. Copy it to your htdocs directory. 

Like other CMSs, CMSMS needs to be in your htdocs path because it 
uses PHP 

3. Run CMSMS through localhost. 

The first time CMSMS runs, it checks for the existence of a script named 
conf ig . php. You need to create an empty file of this name and put it in 
the directory requested by the script. 

If. Create an administration account when prompted by CMSMS. 

This account sets up an administrator for CMSMS (not for the database). 

5. Define the data configuration. 

Figure 4-1 illustrates how CMSMS expects the data to be configured. 
Define the database, username, and password you will use for the data- 
base relating to this CMS. 



Figure 4-1: 

How the 
database 
will be con- 
figured. 
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Data configuration is easier if you create a database and a user with the 
same name. 
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|te a dedicated database. 

Use phpMyAdmin to create a database with the settings you specified in 
Step 5. 

Playing around With the default package 

CMSMS is unique because the default setup is the documentation! Most of 
what you need to know is already available within CMSMS itself. Don't worry, 
though: The documentation is still available, even after you replace it with 
your own content, and CMSMS isn't that hard to use (much easier than 
Drupal, in my opinion). The default setup of CMSMS is shown in Figure 4-2. 

Before you change anything, take a look around and make sure to read the 
default pages because they're full of helpful information about how the 
system is designed. 



Figure 4-2: 

CMS Made 
Simple is 
clean-look- 
ing. 
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> How CMSMS Works 

> Default Templates Explained 

> Default Extensions 

> Andy's Page 



12/22/07 

News Module Installed 

Category: General 
Posted by; admin 
The news module was installed. 
Exciting. This news article is not 
using the Summary field and 
therefore there is no link to read 
more. But you can click on the 
news heading to read only this 
article. 



Home 



Congratulations! You now have a fully functional installation of CMS Made Simple and you are almost 
ready to start building your site. First thing though, you should click here to check if your site requires a 
database upgrade. After you have confirmed you are up to date, then we can get cracking on the site 
development! 



These default pages 



oted to showing you the basics of how to get your site up with CMS Made 



To get to the Administration Panel you have to login as the administrator (with the username/passv 
you mentioned during the installation process) on your site at 
http://yourwebsite.com/cmsmspath/admin. 

If you are right now on your own default install, you can probably just click this link . 
Learning CMS Made Simple 

On these example pages many of the features of the default installation of CM5 Made Simple are 
described and demonstrated. You can learn about how to use different kinds of menus., templates, 
stylesheets and extensions. 

Read about how to use CMS Made Simple in the documentation ^. In case you need any help the 
community is always at your service, in the foruin ffi or the IRC&. 
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The philosophy of CMSMS is straightforward: 

♦ Templates define structure. Templates are basically XHTML pages. If 
you want a new XHTML structure, you simply modify or create a new 
XHTML page. 
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Templates include smarty tags. Templates contain XHTML structure, 
but no content. You put special markers in the templates to indicate 
here the content is placed. I tell you more on that topic as I describe 
w to modify templates, later in this chapter. 



CSS describes layout. As always, use CSS to define the look and feel. The 
CSS for CMSMS isn't really any different than it is for regular XHTML, 
except that a lot of it is already done for you (and done very well). 

♦ Content is defined within the system. When you want to create content, 
you specify a layout, and CMSMS provides a WYSIWYG editor to let you 
type in the content. 

Adding a new page 

The easiest way to understand how CMSMS does its magic is to simply add a 
new page. Here's how it's done: 

1. Log in as admin. 

Point your browser to the admin directory, under the cmsms directory, 
and the login screen for administrative privileges is displayed. The 
default screen looks like the one shown in Figure 4-3. 
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2. Examine the main administration screen to see all your options. 

After you click the Submit button, you'll see a screen like Figure 4-4. 

irst time you see this page, you see a warning that the install directory 
is still in place. Delete the install directory (you don't need it any more), 
and then you don't see the error any more. 



Figure 4-4: 

The main 
Control 
Panel for 
CMSMS. 
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3. Go to the Content section and pick pages. You can go directly to the 
pages section by clicking the pages link. 

This page, shown in Figure 4-5, is where you create and modify the pages Book VIII 

in your system. Chap,er4 

4. Create a new page by clicking the Add New Content link. 

ST 1 

You see a page editor like the one shown in Figure 4-6. S, 5! 

5. Edit the page. = o 

& ° 

CMSMS features a handy editor that feels a lot like a word processor. People — 3 

with no skill in using HTML are still reasonably comfortable creating con- ~ 
tent with this tool. Of course, if you prefer HTML, you can click the HTML 
button and type your own XHTML text. (For basic editing, I let the editor do 
the work, but when I want things a particular way, I write my own HTML.) 
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Figure 4-5: 

You spend a 
lot of time 
managing 
your pages 
here. 
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Figure 4-6: 

The page 
editor. 
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6. Choose a template from the provided drop-down list. 

By^default, CMSMS has five template choices. Of course, you can choose 
' more, but this number is plenty to start with. Be aware that some 
i)lates have more text areas than others, so your template choice 
may be based on the type of text you want to incorporate. 

The CSS style is integrated into the template, but you can change it later, 
if you want. 

7. Test the page by clicking the Preview button. 

Go back and fix your page if there's anything you want to change. 

8. Click the Submit button to accept the changes to your page. 
You return to the Pages section. 

9. Modify your page settings. 

Although the page is automatically linked to the menu system, you can 
easily change each page's position and settings. You can move a page up 
or down in the menu system, and you can assign it a parent, making the 
page a submenu of any other page. 

Feel free to experiment by adding and manipulating pages and changing the 
page styles. 



Customizing CMSMS 



Of course, you have the most fun working with a CMS when you totally change 
the way it looks. Fortunately, CMSMS is easier to customize than most CMSs. 

Adding a theme 

Begin by finding a theme online that you want to modify. CMSMS has an 
active and dynamic community of theme builders. Follow these steps: 

Book VIII 

/. Find a theme you like. Cha P ,er 4 

Search http : / /themes . cmsmade simple . org, and you're bound to 

find something you like. It doesn't have to be perfect. Find something Q 

close, and then you can modify it with your own graphics and colors. ^ =' 

o 10 

2. Download the theme. » " 

= = 

Most CMSMS themes are XML files. You download the file, rather than " 3 

open it directly. You need to store the XML file somewhere on a disk. 

3. Log into CMSMS in admin mode. 

4. Find the theme manager on the Layout menu. It looks like Figure 4-7. 
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Figure 4-7: 

The theme 
manager in 
CMSMS. 
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5. Import the theme. 

You see the Import tab near the top of the theme manager. Navigate to 
the XML file you just downloaded and click the Import button. The 
Theme Manager returns, and your new theme should be available. 

The theme is just the packaging of a template and some CSS files (and 
sometimes images and other resources). 

6. Activate the template by clicking the X to change it to a green check mark. 

To activate the theme, go to the Template Manager on the Layout menu. 
It looks like Figure 4-8. 

Your new template is listed as Inactive by default so that you can test it 
before you make it available. 

7. Set all pages to use the new template by clicking the appropriate link. 

Because this is just a test, try setting all your pages to use the template. 

8. View the site with the new template in place. 

Your site now follows the standards of the new template. Figure 4-9 
demonstrates the site with a new template in place. 

The new template, named ssAblaze, was ported from an earlier style at www. 
styleshout . com. Take a look at this site to see some excellent CSS styles. 
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Template 
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templates. 
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Figure 4-9: 

The look 
and feel 
have 
changed, 
but the con- 
tent is 
unchanged. 
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Working With templates 

^"X f^*) lYoucan create a template from scratch if you want, but it may be easier to 

1 [ Q wpKfy an existing template. Here's how: 

/. Choose a template you like. 



We recommend that you start with an existing template so that you can 
take advantage of the previous coder's skill. Identify a template you want 
to modify and locate it in the Template Manager. 

2. Duplicate the template. 

Locate the small Duplicate button on the right side of the Template 
Manager. Duplicate the template and work on a copy so that you don't 
risk breaking the original. 

3. Assign the duplicated template a new name. 

I named mine andyCSSTop2Col because it's based on the CSSMenu 
top 2 col template. 

4. Edit the template. 

You click the small Edit icon to edit the template. You won't make a lot of 
changes to it, but look over the code. Figure 4-10 shows a simple template 
in the editor. 



Figure 4-10: 

In this basic 
template, 
notice the {} 
tags. 
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browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and 
set them later on 



* { 

margin:0; 
paddingrO; 

> 

r 

Set initial font styles 

7 

body { 

text-align: left; 

font-family: Verdana, Geneva, Aral, Helvetica, sans-serif; 
font-size: 75,01%; 
line-height: lem; 

> 



set font size for all divs, 

this overrides some body rules 
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5. Notice the smarty tags. 

|""N I A template is just an XHTML framework, but it has special smarty tags. 

1 \fj IJ |*j fj fj ^"©Smarty template engine, which is included with CMSMS, allows for 

SeWer-side replacement. The { content } tag is replaced with 
whichever content has been added to that page, for example. 

6. Make changes and close the Template Manager. 

You can add boilerplate code, if you want. I thought that the left column 
looked bare, for example, so I added a Quote of the Day feature. 

7. Attach a style sheet or two. 

You use the Attach Stylesheets button to attach one or more style sheets 
to this template. Whenever the template is invoked, the indicated style 
sheet is automatically loaded by the CMS. You can add more than one 
style sheet (for example, the print style sheet already handles creating a 
print layout). Figure 4-1 1 shows the style-sheet linking tool. 



Figure 4-11: 

The style- 
sheet linking 
tool con- 
nects one or 
more style 
sheets to a 
template. 
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Changing a style 

|""N ["^ |0f course, you probably want to add your own styles, which is pretty easy to 

-J I 0 D O 0 0 KQp MSMS - follow these steps: 

/. Check the Assign Styles dialog box to see which styles are attached. 

If your template was copied from another template, it probably inherited 
some styles from the parent template. Identify any styles your template 
is already using. 

2. Duplicate a style before changing it. 

Adjust one of the already existing styles. As with templates, never 
change the original, but instead make a copy and then modify the copy. 
Duplicate the style sheet and give it a new name. 

3. Edit the new style sheet. 

The new style sheet is simply a CSS document. Look it over to see which 
changes you want to make. (As always, the Web Developer toolbar can 
be a godsend for modifying styles.) Begin with basic changes, such as 
colors, before doing the more dramatic stuff. 

4. Attach the new style sheet to the template. 

Tell the template that you want to use the new style sheet with your 
changes by adjusting the CSS assignments. Also, remove the style sheet 
that your new style replaces. 




Adding, a custom tag 



One of the coolest features of CMSMS is also one of the easiest to use. You 
can easily create custom tags that do anything you can do in PHP. Here's 
how it works: 

/. Open the User-Defined Tags page in the Extensions menu. 

2. Add a new user-defined tag by clicking the appropriately named link. 

3. Insert some PHP code in the resulting text editor. 

Just for fun, I added a simple loop, as shown in Figure 4-12. 

4. Name and save the tag. 

I named my new tag count because it creates an unordered list with a 
for loop. Use the Submit button to save your tag. 

This counting script is a completely made-up example. Normally, you'll 
use custom scripts for things like database lookup or other more 
advanced PHP not already handled by the CMS. 
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Figure 4-12: 

This quick 
PHP script 
is about to 
become a 
smarty tag. 
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> // end for loop 
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5. Edit a page or template. 

I'm adding the counter to "Andy's Page," for this example. 

6. Add the count tag to the page. 

Figure 4-13 shows a page with the new { count } tag included in the 
source. 

Figure 4-13 also illustrates my customized style on my custom page. 
Slick, huh? 

7. View the page and be amazed. 

When you view the page, you see the tag replaced by the results of exe- Book VIII 
cuting the code. Chapter 4 



The custom tag feature is incredibly useful because you can use it to do any- 
thing you can do with ordinary PHP, which is quite a lot. o, 

Even better, your PHP is in short snippets, which are usually easier to write S " 

and understand than huge applications that create mounds of XHTML code. S 

o 
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Figure 4-13: 

Now, when- 
ever I use 
the { count} 
tag, the 
PHP code 
executes. 
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Even those who are unfamiliar with HTML can use this editor, because it feels a lot like a word 
processor. It's really pretty nice. 
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Building a "Poor Man's CMS" With \lour Ou/n Code 

The benefits of using a CMS are very real, but you may not want to make the 
commitment to a full-blown CMS. For one thing, you have to learn each 
CMS's particular way of doing things, and most CMSs force you into a partic- 
ular mindset. For example, you think differently about pages in Drupal than 
you do in CMSMS. You can still get some of the benefits of a CMS with some 
simpler development tricks, as described in the following sections. 

Using Serter -Side Includes (SSls) 

Web developers have long used the simple SSI (Server-Side Include) trick as 
a quick and easy way to manage content. It involves breaking the code into 
smaller code segments and a framework that can be copied. For example, 
Figure 4-14 shows a variation of the Web site developed in Chapter 2 of this 
minibook. 

Even if you view the source code, you don't find anything unusual about the 
page. 
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Figure 4-14: 

This Web 
page ap- 
pears to 
be a stan- 
dard page. 
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WASHINGTON, DC - Braving balmy temperatures and sunny skies, millions of searfless snowmen and 
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However, if you look at the code in a text editor, you find some interesting 
discoveries: 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv= 11 content-type 11 content="text/xml; charset=utf- 
<title>CS Standard Template</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "csStd.css" /> 

</head> 



8" /> 



<body> 

<div id = "all"> 

<!-- This div centers a fixed-width layout --> 
<div id = " heading "> 

<!--#include virtual = "head.html" --> 
</div><!-- end heading div --> 

<div id = "menu"> 

<!--#include virtual = "menu.html" --> 
</div> <!-- end menu div --> 

<div class = " content "> 

<!--#include virtual = "storyl.html" --> 
</div> <!-- end content div --> 
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<div class = " content "> 

<!--#include virtual = "story2.html" --> 
7div> <!-- end content div --> 

div id = 11 footer "> 
<!--#include virtual = "footer.html" --> 
</div> <!-- end footer div --> 
</div> <!-- end all div --> 
</body> 
</html> 

Some interesting things are happening in this code snippet: 

♦ The page has no content! All the actual content (the menus and the 
phony news stories) are gone. This page, which contains only structural 
information, is the heart of any kind of CSS — the structure is divorced 
from the content. 

♦ A funky new tag is in place of the content. In each place that you 
expect to see text, you see an < ! --ttinclude --> directive, instead. 
This special instruction tells the server to go find the specified file and 
put it here. 

♦ The filename is unusual. The server doesn't normally look for include 
tags (because most pages don't have them). Typically, you have to save 
the file with the special extension . shtml to request that the server 
look for include directives and perform them. 

♦ Servers don't always allow SSI technologies. Not every server is config- 
ured for Server-Side Includes. You may have to check with your server 
administrator to make this work. 

The nice thing about Server-Side Includes is the way that it separates the con- 
tent from the structure. For example, look at the code for the first content block: 

<!--#include virtual = "storyl.html" --> 

This code notifies the server to look for the file storyl . html in the current 
directory and place the contents of the file there. The file is a vastly simpli- 
fied HTML fragment: 

<h2>Factual Error Found on Internet</h2> 
<P> 

LONGMONT, CO - The Information Age was dealt a stunning blow Monday, 
when a factual error was discovered on the Internet. The error 
was found on TedsUltimateBradyBunch.com, a Brady Bunch fan site 
that incorrectly listed the show's debut year as 1968, not 1969 . 
</p> 
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<pxem>The Onion</emx/p> 
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This approach makes it very easy to modify the page. If I want a new story I 
simply make a new file, storyl . html, and put it in the directory. Writing a 
to do this automatically is easy. 



oote 



Like PHP code, SSI code doesn't work if you simply open the file in the 
browser or drag the file to the window. SSI requires active participation from 
the server; to run an SSI page on your machine, therefore, you need to use 
localhost, as you do for PHP code. 



Usinq AJAJC/JQuery for client-side 

If you don't have access to Server-Side Includes, you can use AJAX to get the 
same effect. 




Figure 4-15 shows what appears to be the same page, but all is not what it 
appears to be. 

Figure 4-14 and 4-15 look identical, but they're not. I used totally different 
means to achieve exactly the same output, from the user's point of view. 
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Figure 4-15: 

This time, I 
grabbed 
content 
from the 
client side. 
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The code reveals what's going on: 

OCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
^?//www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 
flk^#Lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
~head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>CS Standard Template</title> 
<link rel = "stylesheet" 
type = "text/ess" 
href = "csStd.css" /> 
<script type = " text/ javascript " 

sre = " jquery-1 . 2 . 1 . js"x/script> 
<script type = " text/ javascript"> 
//<! [CDATA [ 

$ (document) .ready (function ( ) { 
$ ( "#heading" ) . load ( "head.html " ) ; 
$ ( " #menu " ) . load ( "menu . html " ) ; 
$ ( " #contentl " ) . load ( " storyl . html " ) ; 
$ ( " #content2 11 ) . load ( " story2 . html " ) ; 
$ ( "#footer" ) . load( "footer .html" ) ; 
}); 
//]]> 
</script> 
</head> 

<body> 

<div id = "all"> 

<!-- This div centers a fixed-width layout --> 
<div id = 11 heading "> 
</div><!-- end heading div --> 

<div id = "menu"> 

</div> <!-- end menu div --> 

<div class = "content" 
id = "contentl"> 
</div> <!-- end content div --> 

<div class = "content" 
id = "content2"> 
</div> <!-- end content div --> 

<div id = 11 footer "> 

</div> <!-- end footer div --> 

</div> <!-- end all div --> 
</body> 
</html> 




Once again, the page content is empty. All the contents are available in the same 
text files as they were for the Server-Side Includes example. This time, though, I 
used a jQuery AJAX call to load each text file into the appropriate element. 

The same document structure can be used with very different content by 
changing the JavaScript. If you can't create a full-blown CMS (because the 
server doesn't allow SSI, for example) but you can do AJAX, this is an easy 
way to separate content from layout. 
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Building a page With PHP includes 

|""N Oicourse, if you have access to PHP, it's quite easy to build pages dynamically. 

DropBocfe 



fnclude .php program shows how this is done: 

1D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //KN" 
"http://www.w3 . org/TR/xhtmll/DTD/xhtmll-strict .dtd"> 
<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>CS PHP Includes</title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "csStd.css" /> 

</head> 



<body> 

<div id = "all"> 

<!-- This div centers a fixed-width layout --> 
<div id = " heading "> 

<?php include ( "head.html" ) ; ?> 
</div><!-- end heading div --> 



<div id = "menu"> 

<?php include ( "menu.html" ) ; ?> 
</div> <!-- end menu div --> 



<div class = " content "> 

<?php include ( "storyl .html ") ; ?> 
</div> <!-- end content div --> 



<div class = " content "> 

<?php includeCstory2.html"); ?> 
</div> <!-- end content div --> 
<div id = "footer"> 

<?php include (" footer .html ") ; ?> 
</div> <!-- end footer div --> 
</div> <!-- end all div --> 
</body> 
</html> 



As you can see, using PHP is almost the same as using the SSI and AJAX Book VIII 

approaches from the last two sections of this chapter: Chapter 4 

/. Start by building a template. 

The general template for all three styles of page inclusion is the same. o §r 

There's no need to change the general design or the CSS. g>(§ 

= c-a 

2. Create a small PHP segment for each inclusion. » g 

In this particular situation, it's easiest to write XHTML code for the main site 
and write a small PHP section for each segment that needs to be included. 

3. Include the HTML file. 



o 



Each PHP snippet does nothing more than include the appropriate HTML. 
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Creating l/our Ou/n Data-Based CMS 

rse, if you've come this far in the chapter, you ought to go all the way 
e how a relational database can add flexibility to a page-serving 
1. If you really want to turn the corner and make a real CMS, you need 
a system that stores all the data in a data structure and compiles the pages 
from that structure dynamically That sounds like a project. It's not nearly as 
intimidating as it sounds, though. 

Using a database to manage content 

The first step is to move from storing data in files to storing it a relational 
database. Each page in a content management system is often the same 
structure, and only the data is different. What happens if you move away 
from text files altogether and store all the content in a database? 

The data structure might be defined like this in SQL: 

DROP TABLE IF EXISTS cmsPage; 
CREATE TABLE cmsPage ( 

cmsPagelD INTEGER PRIMARY KEY AUTO_INCREMENT , 
title VARCHAR (30) 

) ; 

DROP TABLE IF EXISTS cmsBlock; 
CREATE TABLE cmsBlock ( 

cmsBlockID INTEGER PRIMARY KEY AUTO_INCREMENT , 
blockTypelD INTEGER, 
title VARCHAR (50) , 
content TEXT, 
pagelD INTEGER 

) ; 

DROP TABLE IF EXISTS blockType; 
CREATE TABLE blockType ( 

blockTypelD INTEGER PRIMARY KEY AUTO_INCREMENT , 
name VARCHAR (30) 

) ; 

DROP VIEW IF EXISTS pageView; 
CREATE VIEW pageView AS 
SELECT 

blockType. name as 'block' , 
cmsBlock. title as 'title', 
cmsBlock. content as 'content 1 , 
cmsPage . cmsPagelD as 'pagelD' , 
cmsPage. title as 'page' 
FROM 

cmsBlock, blockType, cmsPage 
WHERE 

cmsBlock. blockTypelD = blockType. blockTypelD; 



DropBoofes 
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This structure has three tables and a view: 



DropBool^ 

so th 




cmsPage table: Represents the data about a page, which currently 
much. A fuller version might put menu information in the page data 
so that the page would "know" where it lives in a menu structure. 

♦ The cmsBlock table: Represents a block of information. Each block is 
the element that would be in a miniature HTML page in the other sys- 
tems described in this chapter. This table is the key table in this struc- 
ture because most of the content in the CMS is stored in this table. 

♦ The blockType table: Lists the block types. This simple table describes 
the various block types. 

♦ The page View view: Ties together all the other information. After all the 
data is loaded, the pageView view ties it all together, as shown in 
Figure 4-16. 

Some of the data (the menu information and the link to The Onion) is being 
read as HTML, but it's still text data. I included the entire SQL file, including 
the insert statements, on the CD-ROM as buildCMS . sql. 



Figure 4-16: 

This view 
describes 
all the data 
needed to 
build a 
page. 
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LONGMONT, CO - The Information Age was dealt a stunning blow Monday, when a tactual error was 
discovered on the Internet The error was found on Teds L'ltimateBrady Bunch, com. a Brady Bunch fan site that 
incorrectlv listed the show's debut vear as 196S. not 1969. 



WASHINGTON, DC - Braving balmy temperatures and sunny skies, millions of scarfless snowmen and 
sncwwomen gathered in cities across the world Tuesday to raise public awareness about the heavy toll global 
■aniline is taking on their heath and well-being. 

1 'news' items from The Onion 
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Writing a PHP page to read from the tabte 

headvantage of using a data-based approach is scalability. In using all the 
hCmodels in this chapter, I had to keep copying the template page. If you 
\cme to make a change in the template, you have to change hundreds of 
pages. If you use data, you can write one PHP program that can produce any 
page in the system. All this page needs is a page-number parameter. Using 
that information, it can query the system, extract all the information needed 
for the current page, and then display the page. Here's the (simplified) PHP 
code for such a system: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/ /EN" 
"http://www.w3 .org/TR/xhtmll/DTD/xhtmll -strict .dtd"> 

<html lang="EN" dir="ltr" xmlns="http: //www.w3 .org/1999/xhtml"> 
<head> 

<meta http-equiv="content-type" content="text/xml; charset=utf -8 " /> 
<title>dbCMS .php . </title> 
<link rel = "stylesheet" 

type = "text/ess" 

href = "csStd.css" /> 

</head> 
<?php 

//get pagelD from request if possible 
$pageID = $_REQUEST [ "pagelD" ] ; 

$pageID = mysgl_real_escape_string ( $pageID, $conn) ; 
if ($pageID == "") { 

$pageID = 1; 
} // end if 

//read current page information from the db 

$conn = mysql_connect ( "localhost" , "xfd", "xfdaio"); 

mysql_select_db ( "xfd" ) ; 

$sql = "SELECT * FROM pageView WHERE pagelD = 1"; 
$result = mysql_query($sql, $conn) ; 

//populate local variables from db result 
while ($row = mysql_fetch_assoc ($result) ) { 
if ($row[ "block" ] == "head"){ 

$head = $row[ " title" ] ; 
} else if ( $row[ "block" ] == "menu"){ 

$menu = $row [ 11 content " ] ; 
} else if { $row[ "block" ] == "contentl"){ 

$clTitle = $row [" title "] ; 

$clText = $row[ "content" ] ; 
} else if ( $row[ "block" ] == "content2"){ 

$c2Title = $row [" title "] ; 

$c2Text = $row[ "content" ] ; 
} else if { $row[ "block" ] == "footer") { 

$footer = $row[ "content" ] ; 
} // end if 
} // end while 

?> 

<body> 

<div id = "all"> 

<!-- This div centers a fixed-width layout --> 



Creating l/our Ou/n Oata-Based CMS 893 



<div id = " heading "> 




<hl> 

<?php print $head; ?> 
Vhl> 

Hlvx!-- end heading div --> 



<div id = "menu"> 

<?php print $menu; ?> 
</div> <!-- end menu div --> 

<div class = " content "> 
<h2> 

<?php print $clTitle; ?> 
</h2> 
<p> 

<?php print $clText; ?> 
</p> 

</div> <!-- end content div --> 

<div class = " content "> 
<h2> 

<?php print $c2Title; ?> 
</h2> 
<P> 

<?php print $c2Text; ?> 
</p> 

</div> <!-- end content div --> 

<div id = " footer "> 

<?php print $footer; ?> 
</div> <!-- end footer div --> 
</div> <!-- end all div --> 

</body> 
</html> 

Here's the cool thing about dbCMS. This page is all you need! You won't have 
to copy it ever. The same PHP script is used to generate every page in the 
system. If you want to change the style or layout, you do it in this one script, 
and it works automatically in all the pages. 

Looking at all the code at once may seem intimidating, but it's quite easy 
when you break it down, as explained in these steps: 

/. Pull the pageiD number from the request. 

If possible, extract the pageiD number from the GET request. If the user 
has sent a particular page request, it has a value. If there's no value, get 
page number 1: 

//get pageiD from request if possible 
$pageID = $_REQUEST [ "pageiD" ] ; 

$pageID = mysgl_real_escape_string ( $pageID, $conn) ; 
if ($pageID == ""){ 

$pageID = 1; 
} // end if 
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Don't forget to escape the pageiD data! Whenever you extract data from a page 
to use in a query, remember to escape the data to prevent injection attacks. 

ery pageview to get all the data for this page. 

The pageview view was designed to give you everything you need to 
build a page with one query. 

If you're using MySQL 4 (without views), just copy the query from the 
view definition and insert it into your PHP code. The view is just a 
shortcut — it's never absolutely necessary. 

3. Pull values from the query to populate the page. 

Look at each response of the query. Then, look at the block value to see 
which type of query it is and populate local variables: 

/ / read current page information from the db 

$conn = mysql_connect ( 11 localhost " , "xfd" , "password"); 

mysql_select_db ( "xfd" ) ; 

$sgl = "SELECT * FROM pageview WHERE pageiD = $pageID" ; 
$result = mysql_query($sql, $conn) ; 



It. Write out the page. 

Go back to HTML and generate the page, skipping into PHP to print the 
necessary variables. 



Improving the dbCMS design 

Although the simple PHP/MySQL combination described in the last section 
is a suitable starting point, you probably want to do a bit more to make a 
complete CMS because a better CMS might have the following features: 



♦ Automatic menu generation: The menu system in dbCMS is too static as 
it is. Your database should keep track of where each page is located in 
the system, and your menu code should be dynamically generated 
based on this information. 

♦ Error-checking: This program isn't nearly robust enough for real use 
(yet). It crashes if the data isn't complete. Before you can use this system 
in a real application, you need a way to improve its "crashworthiness." 

♦ Data input: What would truly improve this system is a mechanism for 
adding new data to the data tables. Allow the user to create new pages 
and content. Provide a form for creating a new page. When the user adds 
information, it's passed to the database, where it's immediately available 
as a new page. 
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System Requirements 



ake sure that your computer meets the minimum system requirements 
shown in the following list. If your computer doesn't match up to most 
of these requirements, you may have problems using the software and files on 
the CD. For the latest and greatest information, please refer to the ReadMe file 
located at the root of the CD-ROM. 




♦ A PC running Microsoft Windows 98, Windows 2000, Windows NT4 
(with SP4 or later), Windows Me, Windows XP, or Windows Vista. 

♦ A Macintosh running Apple OS X or later. 

♦ A PC running a version of Linux with kernel 2.4 or greater. 

♦ An Internet connection 

♦ A CD-ROM drive 

If you need more information on the basics, check out these books pub- 
lished by Wiley Publishing, Inc.: PCs For Dummies, by Dan Gookin; Macs For 
Dummies, 9th Edition, by Edward C. Baig; iMac For Dummies, 5th Edition, by 
Mark Chambers; Windows 95 For Dummies, Windows 98 For Dummies, 
Windows 2000 Professional For Dummies, Microsoft Windows ME Millennium 
Edition For Dummies, Windows Vista For Dummies, all by Andy Rathbone. 



Using the CD 

To install the items from the CD to your hard drive, follow these steps. 



/. Insert the CD into your computer's CD-ROM drive. The license agree- 
ment appears. 
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Note to Windows users: The interface won't launch if you have 
autorun disabled. In that case, click StartORun (For Windows Vista, 
StartOAll ProgramsOAccessoriesORun). In the dialog box that 



V w a PP ears > tyP e D:\Start.exe. (Replace D with the proper letter if your 
CD drive uses a different letter. If you don't know the letter, see how 
your CD drive is listed under My Computer.) Click OK. 

Note for Mac Users: The CD icon will appear on your desktop, double- 
click the icon to open the CD and double-click the "Start" icon. 

2. Read through the license agreement, and then click the Accept button 
if you want to use the CD. 

The CD interface appears. The interface allows you to install the pro- 
grams and run the demos with just a click of a button (or two). 



The following sections are arranged by category and provide a summary of 
the software and other goodies you'll find on the CD. If you need help with 
installing the items provided on the CD, refer back to the installation instruc- 
tions in the preceding section. 

Shareware programs are fully functional, free, trial versions of copyrighted 
programs. If you like particular programs, register with their authors for a 
nominal fee and receive licenses, enhanced versions, and technical support. 

Freeware programs are free, copyrighted games, applications, and utilities. 
You can copy them to as many PCs as you like @md for free @md but they 
offer no technical support. 

GNU software is governed by its own license, which is included inside the 
folder of the GNU software. There are no restrictions on distribution of GNU 
software. See the GNU license at the root of the CD for more details. 

Trial, demo, or evaluation versions of software are usually limited either by 
time or functionality (such as not letting you save a project after you create it). 



For Windows and Mac. 

All the examples provided in this book are located in the Author directory 
on the CD and work with Macintosh, Linux, Unix and Windows 95/98/NT and 
later computers. These files contain the sample code from the book. The 
structure of the examples directory is 
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Aptana Studio 1. 1, Community Edition 

Often source. 




'ows and Mac OS. A full-featured programmer's editor that greatly 
simplifies creating Web pages, CSS documents, and code in multiple lan- 
guages. 

CMS Made Simple 1.2.2 

Open source. 

For Windows and Mac OS. A content management system that's easy to run 
and modify. 

DBDesigner l*. 0. 5. 6 

Open source. 

For Windows. A visual database designer for building complex database 
models. 



Bia 0.96.1 

Open source. 

For Windows. A drawing tool suitable for site diagrams, flow diagrams, and 
other vector-drawing applications. 

FireFox 2.0.0. 12 and Extensions 

Open source. 

For Windows and Mac OS. I've included several extensions to the Firefox Web 
browser that turn it into a thoroughbred Web development platform. Web 
Developer Toolbar 1.1.4 adds all kinds of features for creating and testing 
pages; HTML Validator 0.840 checks your pages for standards-compliance; 
the FireBug 1.05 extension adds incredible features for JavaScript and AJAX 
debugging; and FireFTP, Mozilla's FTP client program. 

GIMP 2.4.4 

Open source. 

For Windows. A professional-level graphics editor in a free package. It does 
everything the expensive graphics editors do. 
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Ir fan Wert 4. 10 

\Freewi 



indows. A useful graphics viewer program. 

/Query 1.2. 1 

Open source. 

For Windows and Mac OS. A JavaScript Library that helps you transfer HTML 
documents, handle events, and include AJAX features in your Web pages. 

Nvu 1.0 

Open source. 

For Windows and Mac OS. A visual HTML editor that lets you see changes as 
you make them. 



prototype 1.6 

Open source. 

For Windows and Mac OS. A JavaScript library that simplifies form handling 
and AJAX. 



SQLite 303.5.6 

Open source. 

For Windows and Mac OS. A powerful software library as well as SQL data- 
base engine. 



WinSCP b.0.5 

Open source. 

For Windows. WinSCP is an SFTP client and FTP client for Windows used to 
secure file transfers between local and remote computers. 



Vim 7. 1 

Open source. 

For Windows and Mac OS. A venerable text editor with modern enhancements. 
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XAMPP 1.6.6 

GItU version. 




'ows and Mac OS. XAMPP is a complete server package that's easy to 
install and incredibly powerful. This package includes the incredible Apache 
Web server, the PHP programming language, the MySQL database manager, 
and tons of useful utilities. 



Troubleshooting 

I tried my best to compile programs that work on most computers with the 
minimum system requirements. Alas, your computer may differ, and some 
programs may not work properly for some reason. 

The two likeliest problems are that you don't have enough memory (RAM) 
for the programs you want to use, or you have other programs running that 
are affecting installation or running of a program. If you get an error message 
such as Not enough memory or Setup cannot continue, try one or 
more of the following suggestions and then try using the software again: 

♦ Turn off any antivirus software running on your computer. Installation 
programs sometimes mimic virus activity and may make your computer 
incorrectly believe that it's being infected by a virus. 

♦ Close all running programs. The more programs you have running, the 
less memory is available to other programs. Installation programs typi- 
cally update files and programs; so if you keep other programs running, 
installation may not work properly. 

♦ Have your local computer store add more RAM to your computer. This 
is, admittedly, a drastic and somewhat expensive step. However, adding 
more memory can really help the speed of your computer and allow 
more programs to run at the same time. 

Customer Care 

If you have trouble with the CD-ROM, please call the Wiley Product Technical 
Support phone number at (800) 762-2974. Outside the United States, call 
1(317) 572-3994. You can also contact Wiley Product Technical Support at 
http://support.wiley.com. John Wiley & Sons will provide technical support 
only for installation and other general quality control items. For technical sup- 
port on the applications themselves, consult the program's vendor or author. 

To place additional orders or to request information about other Wiley products, 
please call (877) 762-2974. 
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- - operator, 373 
! = (not equal operator), 
361 

! = : comparison operator, 
541 

#attribution selector, 
187 

#left div element, 278 
#menu a : hover selector, 
297 

#menu li li li 

attribute, 312 
#myThing selector, 749 
#quote style, 188 
#right div element, 278 
$ operator, 452, 749 
% (percentages), 174, 

324-325, 671 
%2 0 symbol, 523 
%d character, 385 
%o character, 385 
%s character, 385 
& (ampersand), 523 
&& logical operator, 541 
* characters, 452, 456, 668 
. (period) symbol, 452, 

455, 505 
. = operator, 508 
/ (forward slashes), 13, 34, 

125, 603 
/ / (two slashes), 83, 340 
/ * * / (multi-line 

comment) character, 

232, 340 
/> characters, 93 
: (colon), 83, 367-368 
:hover pseudo-class, 201, 

303 

mot selector, 762 

,• (semicolon), 340, 503, 658 

? (question mark), 523 

?> symbol, 515, 531 

[ ] (square brace), 405 



[char range] operator, 
452 

[characters] operator, 
452 

\ (backslash), 434, 504, 508, 

597, 603 
\ \ directive, 504 
\ ' directive, 504 
\ " directive, 504 
\ $ directive, 504 
\b operator, 452 
\d operator, 452, 455 
\n (newline) character, 

407, 434, 504, 508, 590, 

596 

\t (tabs) characters, 504, 
591 

A (caret), 452, 454 
_ (underscore), 579 
{ (left brace), 367, 579 
{ } (braces), 144, 456 
{ } (curly braces), 538, 545 
{content} tag, 881 
{count} tag, 883 
{digit} operator, 452 
{min, max } operator, 453 
I (pipe) delimiter, 591, 596 
| | logical operator, 541 
} (right brace), 367, 579 
~ (tilde) character, 83, 591, 
762 

+ (plus sign), 344, 353-354, 
456 

+ operator, 452 
<! -- --> tag, 13 
<? ?> tags, 789 
< (less than operator), 361 
< : comparison operator, 
541 

<= (less than or equal to 

operator), 361 
<= : comparison operator, 

541 

<> (angle braces), 12, 152 
<> symbols, 507 
<legend> tag, 123 



<?php symbol, 510, 521, 531 
<?php tag, 515 
= (equal sign), 523 
= (single equal sign), 536, 
670 

== (double equal sign), 
361-362, 536, 545, 670 

== : comparison operator, 
541 

=> (pointer arrow), 557, 570 
> (greater-than operator), 

304, 361 
> : comparison operator, 

541 

>= (greater than or equal to 

operator), 361 
>= : comparison operator, 

541 

0 = Uninitialized 

value, 738 

1 = Loading value, 738 
, (comma), 660 

" (double quotes), 508, 597 
' (single quotes), 597, 789 

2 = Loading value, 738 
200 = OK code, 734 

3 = Interactive value, 

738 

3D button filter, 110 

4 = Completed value, 738 
400 = Bad Request 

code, 734 
404 = Not Found code, 
734 

408 = Request Timeout 

code, 734 
50 0 = Internal Server 

Error code, 734 

A 



<a href> tag, 82, 330 
a value, 588 
<a> tag, 81-82, 198, 200 
absolute layouts, 319, 327 
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absolute measurement, 

Droplliite 

guidelines, 315-316 
animation, 467 
building page layouts 

with, 319-327 
managing z-index, 317 
versus other techniques, 

332 

overview, 313-314 
setting up HTML, 314-315 
steps, 316-317 
absolute references, 85-86 
accept option, 777, 783, 

785 
Access, 635 

action attribute, 121, 137, 
421, 518, 520-521, 523, 
529 

action elements, 121 
active rule, 777 
activeclass option, 777 
actual fonts, 163 
Add Table page, 651 
addlnput program, 

355-356 
addNumbers . html 

program, 351 
$address variable, 507 
adds lashes ( ) function, 

597 

Adjust Colors command, 
221 

admin account, 864 
admin directory, 874 
Administer page, 864 
administration screen, 875 
administrator login, 

857-858 
administrators, 864 
Adobe Flash, 166, 251-252, 

727 



Adobe Photoshop 8BF 

format, 112 
Aesop, 25, 27 
AJAX. See Asynchronous 

JavaScript and XML 
alert ( ) statement, 340, 

343, 355, 370 
alignment, text, 180-181 
all container, 325-326 
all div, 289-291,320 
alpha ID, 330 
alpha transparency, 102 
alt (alternate text) 

attribute, 94, 169-170 
alternate text (alt) 

attribute, 94 
alternative Web 

development tools, 

40-42 
ampersand (&), 523 
Analogic color scheme, 157 
anchor tags, 81-82, 89, 118, 

235 
anchors, 309 
and clause, 543, 719 
angle braces (<>), 12, 152 
animate ( ) function, 482, 

486, 762 
animation 
creating automatic 

motion, 476-478 
following mouse, 472-476 
GIFs, 101 

image-swapping, 478-483 
jQuery, 759-764 
motion effects, 459-467 
overview, 459 
reading input from 
keyboards, 468-472 
answer subclasses, 192 
answer variable, 376 
"Ants Go Marching, The", 
program, 396-402, 
407-408 



antsFunction . html 

program, 397-398 
Apache Web server, 806 
Application Programming 

Interfaces (APIs), 742 
Apply to All Folders 

button, 16 
Aptana IDE, 57-60, 336, 498, 

577-578, 636. See also 

Debug Mode 
arrays 
building basic, 405-408 
defined, 395 
in PHP, 555-573 
two-dimensional, 408-412 
artifacts, 99 
ASC keyword, 676 
ASCII files, 658 
askName.html page, 516, 

526 

aspect ratio, 105 
ASP.NET, 493-494 
Assign Styles dialog box, 
882 

associative arrays, 559, 

569-570 
asterisk characters, 127 
Asynchronous JavaScript 
and XML (AJAX). See 
also jQuery JavaScript 
library 
asynchronous 

connections, 735-738 
basic connections, 

728-735 
JSON, 795-800 
overview, 725-728 
using for client-side CMSs, 

887-888 
XML, 787-789 
Attach Stylesheets button, 
881 

attributes, 20, 72, 205-207 
Attributes section, 742 
attribution id, 187 
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attribution value, 187 
audiences, Web site, 



DropW&ks 

AUTO INCREMENT ta 



1 

AUTO_INCREMENT tag, 

664-666 
automatic indentation 

feature, 379 
automatic motion, 476-478 
$aVar variable, 557 
axis option, 777 



B 



<b> tag, 165, 188 
background colors, 417-418 
background images 
gradients, 223-225 
overview, 89, 216-217 
potential problems with, 

217-218 
reducing contrast, 

220-221 
setting colors, 220 
tiled images, 219-220 
turning off repeat, 222-223 
using to simulate 
columns, 287 
background-color 
attribute, 144, 152 
backgroundColor 

property, 422 
background- image 

attribute, 216-217, 225 
backgroundlmage . html 

page, 216, 219-220 
background-repeat 

attribute, 222, 225, 288 
backslash (\), 434, 504, 508, 

597, 603 
bandwidth, 170 
base colors, 208 
base hues, 156 
basic dialog boxes, 772-773 
basic pages, 14 



basicAJax . html 

program, 728 
basicDL.html, 69 
basicLinks.html page, 

81, 86 
basicOL.html, 64 
basicSelect.html, 131 
basicTable.html, 70 
Batch Conversion dialog 

box, 112, 114 
batch processing, 98, 

112-114 
Batch Rename Settings 

area, 114 
"Best viewed with" 

disclaimers, 240 
beta tests, 848 
big ( ) method, 348 
binary encoding, 12, 252 
binary notation, 147, 

363-364 
bind function, 756-757 
black shading, 208 
blah string, 569 
bleed-over effects, 324 
blink attribute, 180 
<blink> tag, 180 
blob data type, 632 
blob property, 621 
block value, 894 
block-level elements, 82, 

211,238, 255-260 
blockType table, 891 
blogging, 852, 854 
blue.html program, 417 
blur filter, 108 
.bmp format, 99, 102, 479 
body object, 415 
<body> tag, 13, 143, 174, 

462 

body. onload ( ) function, 
484 

bold text, 176-177 
Boolean values, 353, 361, 
443, 536,817 



border attribute, 72, 308 
border-color attribute, 
208 

borderProps . html 

page, 206 
borders 
attributes, 205-207 
box model, 212-214 
overview, 205 
partial, 210-211 
shortcuts, 209-210 
styles, 207-208 
two-column floating 
layout design, 276-279 
borders . ess page, 276 
borderShortcut . html, 
209 

both attribute, 268 
bounce . html page, 478 
bounce . j s script, 478 
boundaries, animation, 

466-467 
box layout, 838 
box model, 211-216 
box names, 838 
<br />tag, 55, 615 
braces ({}), 144, 456 
breadcrumbs syntax, 418 
break statement, 367, 545, 

552 

breakpoints, 386-387, 

390-391 
Breakpoint/Variables 
window, 389-390 
Brightness option, 106 
broadband, 834 
broken . html page, 380 
browser extensions, 804 
Browser Wars, 47 
browser windows, 10-11 
browsers 

alternative, 49-50 

bottom line in, 50-51 

features, 41 

history of, 47-48 
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browsers (continued) 
incompatibility, 19, 



DropBTOKs 

margins. 317 



margins, 317 
multiple, 41 
overview, 47 
prominent, 48-50 

buildContact 

Autolncrement . sql 

script, 607, 665 
buildContact . sql 

script, 658-659 
buildHero . sql script, 

683 

built-in variables, 525 
business rules, 698 
button element, 262 
button events, 419-422 
button option, 773 
button tag, 138 
buttons, 121, 135-138, 774, 

293, 295-297 
bytes, 96 



.ca domain, 84 
calculated fields, 701-708 
callback method, 760, 775 
camel-casing method, 579 

$cardLocation array, 564 
caret ( A ) character, 452, 
454 

carriage returns, 14 
Cartesian joins, 711-713 
Cascading Style Sheets 
(CSSs) 
borders, 276-277 
CSS 3 embedded fonts, 
166 

design of, 832 
hacks, 241 

hierarchy of, 237-238 
inheriting, 236-237 



overriding, 238-239 
overview, 235 
precedence of definitions, 
240 

steps to build code, 264 
style attributes, 416 
uses, 141 

Web Developer toolbar, 
54, 152-153, 274-275 

cascadingStyles .html, 
239 

case statement, 545 
Catch the Worms game, 

766-767 
CDATA element, 429, 746 
<center> tag, 165, 180, 214 
centered fixed-width 

layouts, 288-291 
centering, 214 
centimeters (cm), 173 
change event, 756 
changeColor ( ) function, 

421-422, 439 
CHAR data type, 632, 634, 

660 

character class, 455 
characters, 350, 454 
chdir ( ) function, 

601-602 
check box variable, 532 
check boxes, 120, 131-133, 

444- 446, 532 
checkBounds ( ) function, 

466-467 
checkData ( ) function, 

736-737 
checked = "checked" 

attribute, 448 
checked property, 

445- 446, 449 
child elements, 782 
chorus ( ) function, 

399-400 
class attribute, 192, 195, 
262 



class name, 753-756 
classes, 191-195, 239 
classes . html page, 

191-192 
clear attribute, 268-270, 

278 

click event, 752, 756 
Click Me button, 434 
click ( ) method, 752, 

755-756 
clients 
Internet, 803-804 
Web site, 830-833 
client-server 

communication, 725 
client-side development 

systems, 804-805 
client-side programming, 
491, 726. See also 
JavaScript 
close function, 772 
cm (centimeters), 173 
CMS Made Simple 
(CMSMS), 871 
adding new pages, 

874-877 
customizing, 877-884 
default package, 873-874 
installing, 872-873 
overview, 871 
cmsBlock table, 891 
CMSMS. See CMS Made 

Simple 
cmsms directory, 874 
cmsPage table, 891 
CMSs. See content 

management systems 
code 
debugging 
Aptana IDE, 378-379 
Firebug, 382-383 
Firefox, 381-382 
Internet Explorer, 
379-381 
float attribute, 254-255 
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indenting, 67-68 
maintenance tools, 40 




table-based layout, 78 
validation of, 21, 41 
code assist feature, 379 
code completion feature, 

336, 388 
colon (:),83, 367-368 
color attribute, 144, 207, 
418 

Color Balance feature, 107 
color names, 145-146 
color palettes, 100, 149-150 
Color Scheme Generator 

tool, 154-157 
colors 
background, 417-418 
choosing, 150-153 
enhancing images, 

106-107 
overview, 141 
schemes, 154-157, 272, 
345 

setting background 

images, 220 
specifying in CSS, 145-150 
style sheets, 141-145 
colorTester . html 

program, 151 
cols attribute, 128 
col span attribute, 76-77 
columns, 75-78, 409, 630. 
See also floating page 
layouts 
.com domain, 84 
Comic Sans MS fonts, 159, 
164 

comma character (,), 660 
comma-separated value 
(CSV) files 
creating, 590-594 
explode function, 570, 
572 

overview, 677 
reading from, 596-600 



comment style sheets, 327 
community-created 

software, 852 
company field, 670 
comparison operators, 

361-362, 541-543 
comparisons, 545-547 
compiled languages, 493 
complementary colors, 157 
complete object, 792 
complex forms, 527-533 
compliance, 48 
compressed formats, 97 
CONCAT ( ) function, 702, 

707 

concatenation 
calculating date values, 

707-708 
JavaScript, 343-345 
PHP, 505-506 
concat . html program, 
344 

conditional comments 
checking IE version, 246 
coping with 

incompatibility, 

240- 241 

making IE-specific code, 

241- 243 
overview, 240 

using with CSS, 243-246 

Web page appearance, 273 
conditions, 361 
conf ig . inc . php file, 642 
configuration 

settings, 820 

testing XAMPP, 807-808 

tools for, 806 
connections 

asynchronous AJAX, 
735-736 

database, 690-692 

MySQL database, 608 

synchronous AJAX, 
728-735 

Web hosts, 814-815 
console, Firebug, 384-386 



console commands, 386 
console object, 384 
console . log ( ) function, 

384-385, 387 
constants, 464 
contact database, 611 
contact table, 613, 659 
contactDL.php, 615 
contact . html page, 616 
contactiD field, 634, 676 
contact . php program, 

606, 618 
contactTable . php code, 

626 

container element, 20, 
239 

containment option, 777 
content class, 330-331 
content management 
systems (CMSs) 
adding content, 858-861 
adding new content 

blocks, 864-867 
changing look of, 867-869 
characteristics of, 850 
creating data-based, 

890-894 
creating with code, 

884-889 
editing pages, 863-864 
installing, 855-858 
menu system, 861-863 
overview, 849-850 
previewing common, 
851-855 
content position, 331 
Content section, 875 
content type, 788 
context, selecting in, 

201-203 
context-style .html 

page, 201-202 
continue control 
structure, 551 
contrast, 220-221 
Contrast color scheme, 157 
Contrast feature, 106 
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control structures 
fo r loops, 548-553 

">ti«jals, 
|5/ "' 

overview, 535 
versus switch statements, 

545-547 
while loops, 548 
control tools, 806 
conversion tools, 354-355 
cookies, 585 

Copy SQL Table Create 

option, 690 
count tag, 882 
counting loops 
by 5, 374-375 
backwards, 373 
overview, 371-372 
standard, 372 
counting script, 882 
Courier New fonts, 164 
Create File button, 817 
create statement, 690 
Create Table Automatically 

radio button, 645 
create table command, 

659-660 
create view statement, 
709 

creation function, 772 
critical paths, 478 
Cropping tools, 98 
cross-platform technique, 
475 

cslnclude .php program, 
889 

. ess extension, 232 
ess ( ) function, 752 
CSS section, 742 
CSSs. See Cascading Style 
Sheets 

CSS-style selectors, 748-749 
CSV files. See comma- 
separated value files 
curly braces ({ }), 538, 545 
CURRDATE ( ) function, 702 



currentOption variable, 
443 

CURRTIME ( ) function, 702 
cursive font, 162, 191 
custom animation, 762-764 
Custom animations effects, 
759 

custom bullets, 89, 226 
custom tags, 882-884 



D: character, 516 
d: character, 516 
Dashed style, 208 
.dat files, 603 
data. See also Structured 
Query Language 
analysis of, 677 
building framework for, 

846-847 
defining, 352-353 
design of, 832 
implementation of, 832 
MySQL, 634-637 
overview, 629 
phpMyAdmin 
adding users, 644-647 
changing root password, 

639-644 
making database with, 

649-655 
overview, 637-639 
using on remote server, 
647-649 
populating XML 

documents with, 789 
storage of, 342 
structure of, 629-634 
Data Definition Language 

(DDL), 630 
data normalization 
entity-relationship 

diagrams, 687-694 
first normal form, 695-696 



identifying data 

relationships, 698-699 
overview, 683 
problems with single-table 

data, 683-687 
second normal form, 

696- 697 

third normal form, 

697- 698 

Web site plans, 836 
data parameter, 792 
Data Query Language 

(DQL), 630 
data relationships, 698-699, 

714 

data rows, 74 
data servers, 805 
database backends, 495 
Database Connection Editor 

dialog box, 691 
data-based content 

management systems 

(dbCMSs) 
improving design of, 894 
overview, 890 
using databases to 

manage content, 

890-891 
writing PHP pages to read 

from tables, 892-894 
databases. See also data 

normalization; MySQL 

databases 
calculating date values, 

703-706 
calculating virtual fields, 

701-703 
connections, 608 
creating, 825-826 
defined, 630 
making with 

phpMyAdmin, 649-655 
managing dbCMS content, 

890-891 
managing many-to-many 

joins, 716-722 
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overview, 701 
problems with single- 




sjTH^HejT! 

combine tables, 
710-715 
views, 708-710 
dataType object, 791 
date data type, 632 
date ( ) format function, 
515 

date values, calculating, 

704-708 
DATEDIFF ( ) function, 

702, 704, 706 
DAY ( ) function, 702 
dbCMSs. See data-based 

content management 

systems 
DBDesigner 4 
connecting to databases, 

690-692 
creating table definitions, 

688-690 
drawing, 687-688 
manipulating data from, 

693-694 
Dblclick event, 756 
dd (definitions), 153 
<dd> tag, 70,617 
DDL (Data Definition 

Language), 630 
debug mode, 386-393 
debug window, 389 
debugging. See also Aptana 

IDE 

arrays with print_r ( ) 
function, 558-559 

catching logical errors, 
383-386 

Firebug, 382-383 

Firefox, 381-382 

Internet Explorer, 379-381 

overview, 378 
debug . html program, 388 



decision-making 
comparison operators, 

361-362 
conditions, 361 
else clause, 362-365 
if statements, 359-361, 

368-370 
random numbers, 357-359 
switch statement, 
365-368 
declarations, XML, 788-789 
declare control structure, 
551 

def property, 621 
default clause, 367 
Default Extension, 59 
default filter, 105 
default formatting, 73 
default layout, 313, 315 
default link action, 250 
default package, CMSMS, 

873-874 
definition lists, 68-70, 

615-617 
definition terms (dt), 68, 

153 

definitions (dd), 153 
delete command, 676-677 
deleting 
in single-table databases, 
687 

SQL records, 677 
delimiters, 592 
depth, 317-319 
DESC keyword, 676 
descriptive text, 85 
design sketches, 841 
Design Traps cell, 77 
Desktop, 16 

$details variable, 568 
DHTML (Dynamic HTML), 
230 

diagrams, 836-839 
dialog boxes, 339, 771-775 



dialog ( ) function, 

772-773 
dialogClose ( ) function, 

773 

dialogOpen( ) function, 
773 

digital images, 95 
directories, thumbnail- 
based image, 117-118 
directory functions 
chdir( ), 601-602 
generating list of file links, 

602-603 
opendir( ), 600-601 
overview, 600 
readdir( ) , 601 
directory passwords, 81 1 
$directoryHandle 

variable, 601 
Display a Notification about 
Every Script Error 
setting, 380 
display attribute, 296, 302 
display: block 
attribute, 303 
display: none attribute, 

302-303 
displaying file extensions, 
15-16 

distance array, 410-411 
distance.html page, 409 
distraction variable, 401 
distractionList array, 
408 

div element, 195-198, 211, 
238, 276, 591, 843 

divOutput variable, 429 

<dl></dl> tag, 70, 616 

DNS (Domain Name 
System), 821 

Doctype line, 28 

doctype tag, 22-23 

doctypes, 22-23 

document object, 415-416 
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document object model 




(DOM) 



Firebug, 414-415 



422 
with 



document object, 415-416 
harnessing through 

JavaScript, 417-418 
navigating, 413-414 
overview, 413 
selecting elements from, 

748 

text elements, 430-436 
text input and output, 

422-426 
writing to documents, 
427-429 
document type definition, 22 
document type does 
not allow error 
message, 32-33 
document variable, 414 
documentation, jQuery 
official, 742 
overview, 741 
tutorials, 742 
visual jQuery, 742-743 
document . getElementBy 
id( ) function, 433, 
440, 443, 465 
$ (document) . ready ( ) 

syntax, 746 
DOM. See document object 

model 
domain managers, 822 
Domain Name System 

(DNS), 821 
domain names, 83, 821-825 
domain search tool, 823 
Dotted style, 208 
double data type, 631 
double equal sign (==), 

361-362, 536, 545, 670 
double quotes ("), 508, 597 
Double style, 208 



double-quoted strings, 506 
do-while control structure, 
551 

downloading, jQuery 

JavaScript library, 

740-741 
DQL (Data Query 

Language), 630 
draggable dialog boxes, 774 
draggable ( ) function, 

764-765 
draggable items, 776 
drawing ER diagrams, 

687-688 
drop option, 765 
drop-down lists, 129-131, 

437-440 
droppable containers, 776 
droppable ( ) function, 

764-766 
dropping tables, 659 
Drupal CMS, 854-855, 868 
dt (definition terms), 68, 

153 

<dt> element, 70, 617 
Duplicate button, 880 
dynamic color palette, 102 
Dynamic HTML (DHTML), 
230 

dynamic length, 633 
dynamic lists, 298-305 



e object, 472 

each loop, 800 

echo statement, 503, 789 

Edit CSS frame, 53 

Edit HTML Entry option, 53 

editing 
CMS pages, 863-864 
programs for, 20 
SQL records, 676-677 

. edu domain, 84 



effects, IrfanView program, 

107-112 
Effects browser, 107 
efficiency, Web site, 848 
element style, 239 
element-level style, 227-228 
elements 
absolute layout, 321 
absolute positioning, 317 
defining style, 144 
with predefined width, 

258-259 
repeating, 67 
selecting in jQuery, 
748-756 
else clause, 362-365, 

535-545 
else if clause, 365 
em measurements, 174 
<em> tag, 93, 188 
Embedded fonts, 166 
embedded games, 251 
embedded images, 89 
embedding 
JavaScript code, 339-340 
PHP inside XHTML, 515 
quotes within quotes, 
421-422 
emboss filter, 110 
emphasis, 93, 188-190 
emphasis.html page, 188 
emphasisStyle . html, 
189 

empty rows, 74 
Enabled check box, 865 
Encoding line, 28 
end tag, 13, 20 
ending values, 671-672 
endless loops, 377-378, 386 
endless .html page, 

378, 387 
Enhance Colors dialog box, 

106,110 
enhanced text editors, 41 
entities, 687, 718 
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entity-relationship (ER) 
diagrams 
oiruictiML t|> i !<"> 1 > bases. 

creating table definitions, 

688-690 
drawing, 687-688 
manipulating data from, 

693-694 
overview, 687 
environment variables, 522, 
525 

e . pageX property, 475 
e . pageY property, 475 
equal sign (=), 523 
ER diagrams. See entity- 
relationship diagrams 
ereg ( ) function, 572 
ereg_ replace ( ) 

function, 572 
error codes, 539 
error messages, 29, 38 
error object, 792 
error warnings, 337 
error-checking, 894 
errors. See also debugging; 
validation 
logical, 383-386 
loop, 376-378 
essay.html program, 127 
eval ( ) function, 355 
event function, 471-472, 
475 

event handlers, 47CM71, 737 
eventComparrison .php 

file, 757 
event-driven programming, 

424 

event-manipulation 

code, 421 
events, 346, 748, 756-757. 

See also button events 
Excel, 678 

Execute permission, 818 
expectations, client, 

831-832 
explode function, 570-572 



exporting SQL data, 

677-682 
$expression variable, 536 
expression window, 393 
expressions. See also 

regular expressions 
Aptana Debug Mode, 386, 

392-393 
switch statements, 

366-367 
expressions panel, 391 
extensible Markup 

Language (XML), 20, 

728 

extensions, 15-16, 59-60, 
492 

Extensions menu, 882 
external CSS, 425 
external files, 463 
external links, 89, 91 
external programs, 492 
external style sheets, 

230-235 
externallmage . html, 89 
externalStyle . html 

page, 231 
ext . j s libraries, 764 



F : character, 516 
Fade effects, 759 
f adein element, 760 
f adeOut element, 760 
f adeTo element, 760 
fake columns, 288 
false expressions, 363 
families, font. See also fonts 

font-family style 
attribute, 160-161 

generic, 161-163 

lists of, 164-165 
family trees, 312 
fancy class, 193 
Fantasy fonts, 163, 236 



f close ( ) function, 
587-588, 590, 595 
f eof ( ) function, 587, 

594-595 
f gets ( ) function, 587, 

594-596 
field elements, 267 
field value, 523 
fields. See also calculated 
fields 
defined, 611, 630 
in records, 631 
single-table databases, 

686-687 
SQL table searches, 

668-673 
virtual, 701-703 
fieldset demo, 123 
f ieldset element 
adjusting width of, 

267-268 
forms, 121-124 
file extensions, 15-16 
file ( ) function, 587, 

594-596 
File line, 28 

file links to directories, 

602-603 
file management tools, 

815-817 
file management window, 

388 

file manager, 15 
file manipulations 
directory functions, 

600-603 
overview, 587 
text files 
creating CSV, 590-594 
overview, 587 
reading from, 594-596 
reading from CSV, 

596-600 
writing text to, 588-590 
file name parameter, 733 
file permissions, 817-818 
file pointer, 589 
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file size, 218 

File Transfer Protocol 




$f ileConnection 

variable, 588 
FileZilla FTP server, 

805-806 
filling arrays 
after creation, 556 
multidimensional, 560-563 
upon creation, 556-557 
filter functions, 527 
filters, 107 
Filters tools, 98 
Firebug extension 
changing DOM properties 

with, 414-415 
debugging with, 382-386 
using, 54-55 
Firefox browser 
compatibility, 730 
debugging with, 381-382 
error reporting, 337 
Firebug extension, 54-55 
HTML Validator, 51-52 
overview, 47-49 
Web Developer toolbar, 
52-54, 843 
FireFTP, 818-820 
firewalls, 810-811 
first normal form, 695-696 
fixed menu systems, 

327-331 
fixed positioning, 313, 327, 
332 

fixed widths, 271 
fixed-width floating layouts 

overview, 285-286 

setting up XHTML, 
286-287 

using images to simulate 
true columns, 287-288 
f ixedwidth. ess style, 291 
Flash, 166, 251-252, 727 
flexible layout, 274 



float attribute 
code for property, 

254-255 
floating page layout, 

252-254 
layout pitfalls, 249-252 
overview, 249 
styling forms with, 

260-270 
using with block-level 

elements, 255-260 
using with images, 

252-254 
float-based layout, 257-258, 

280 

floated class, 257 
floatForm.html page, 

261, 264 
floating page layouts 
versus absolute 

positioning, 332 
fixed-width, 285-291 
overview, 252 
three-column design, 

280-285 
two-column design, 

271-279 
floating point numbers, 353, 

357, 505 
floating text, 94 
float : left attribute, 254 
fluid layouts, 280. See also 

floating page layouts 
Focus event, 756 
Folder Options dialog 

box, 15 
f ollowMouse . html 

page, 473 
font attribute, 183 
font rule, 182-183 
<f ont> tag, 165 
fontcolor ( ) method, 348 
font -family Style 

attribute, 160-161, 

204, 237 



fonts 
families of, 159-165 
font rule, 182-183 
font-style for italics, 

175- 176 
font-weight for bold, 

176- 177 
overview, 159, 174-175 
specifying size of, 170-174 
subscripts, 183-184 
superscripts, 183-184 
text-align for basic 

alignment, 180-181 
text-decoration, 178-180 
Web-based, problems 
with, 165-170 
font-size style attribute, 
168, 171-172, 174-175, 
183, 201 
fontSize.html, 171 
font-style attribute, 

175- 176, 183 
font-variant attribute, 

183 

Font-variant tool, 181 
font-weight attribute, 

176- 177, 183 
footers, 278-279, 288 
fopen( ) function, 

587-589, 594-595 
for loops 
counting backwards, 373 
counting by 5, 374-375 
overview, 371-372, 

548-553 
standard, 372 
using arrays with, 406-407 
for statement, 372-373 
f oreach loops, 551, 

565-570, 613-614, 781 
foreign key references, 697, 

711, 714, 718 
form demo, 119 
form element, 120, 133, 

262, 424-425, 427, 529 
format function, 702 
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formats, image 
BMP, 99 

DropBeafcfc 

I GIF, 99-101 
JPG/JPEG, 99 
overview, 98 
PNG, 102 
formatted printing, 385 
formatting text. See fonts 
formDemo.html page, 120 
forms. See also user input 
buttons, 135-138 
fieldsets, 121-124 
float attribute, 260-270 
HTML, 731 
labels, 121-124 
multiple selection 

elements, 129-135 
normal, 695-698 
overview, 119-121 
PHP and XHTML 
building complex forms, 

527-529 
embedding PHP inside 

XHTML, 515 
method property, 

521-526 
overview, 513-515 
responding to complex 

forms, 530-533 
sending data to PHP 

program, 516-521 
viewing results, 515-516 
text input and output, 

124-128, 422-426 
working with other text 

elements, 430-436 
XHTML search, 621-624 
forums, 854 

forward slashes (J), 13, 34, 

125, 603 
fputs ( ) function, 590 
fractions option, 785 
Frame global variable, 486 
frame variables, 481-482 
frames, 249-250 



Free Hostia, 636, 647-649, 

814, 826 
FreeSans font, 164 
FreeSerif font, 164 
Freya animations, 478 
from clause, 719 
from variable, 412 

FROMDAYS ( INT ) function, 

702 

FTP (File Transfer 

Protocol), 805-806, 
818-821 
function call, 477 
function keyword, 578 
function pointers, 470 
functionality, server, 

811-812 
functions. See also 

individual functions 
by name 
breaking code into, 

395-398 
form text elements, 

432-434 
MySQL databases, 624 
overview, 395 
passing data into and out 

of, 398-402 
in PHP, 575-581 
scope, 402-404 
two-dimension array 
program, 411-412 
fwrite( ) function, 
587-590, 602 

G 



gaming sites, 854 

Gamma Correction feature, 

106-107 
generated source code, 

434-436 
generic elements, 195 
generic fonts, 161-163 
genre variable, 405 
genre . html page, 406 



Georgia fonts, 164 
GET mechanism, 733 
get method, 519, 522-525 
$_GET superglobal, 526 
getAJAX( ) function, 

736-737, 746 
getCity( ) function, 411 
getcwd ( ) function, 602 
getElementByld ( ) 

method, 425-426 
getElementsByName tool, 

449 

getName ( ) function, 581 
getTime .php program, 
514 

ghosting option, 777 
GIF image format, 99-102 
Gimp program, 98 
GimpShop program, 98 
global modifier, 580 
global scoping, 580 
global variables 
in animation, 463-464, 

475, 481-482, 486 
defined, 402 
global Var variable, 403 
Gmail, 726 
Google query, 524 
GOTO statements, 547 
.gov domain, 84 
gradient backgrounds, 

224-225 
gradients, 223-225 
graphic editor, 251 
graphics tools, 169 
grayscale, 154 
greater than or equal to 

operator (>=), 361 
greater-than (>) symbol, 

304,361 
greedy option, 765 
greetUser .php page, 516, 

520-521 
Groove style, 208 
Gueury, Marc, 51 
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<hl> tag, 14, 82, 143, 168, 

173,415 
<h2>tag, 168, 753, 762 
<h3> tag, 65, 67 
handle variable, 600 
.hash( ) function, 778 
<head> tag, 13 
headers, 13, 288 
heading level one, 14 
headings, 74 

headlines, image, 167-170 
heads, 13 

height attribute, 94, 317, 
321 

Hello World! program, 

343, 501, 744-746 
hello . txt file, 746-747 
helloWorld( ) function, 
580 

helloWorld2 ( ) function, 
580 

help features, 41 
help files, 336 
helper class, 777 
helper option, 765 
helperclass option, 777, 
783 

Helvetica font, 164 
heredoc method, 508-510, 
531 

hex values, 131, 145-149, 

152, 523 
hidden elements, 753 
hidden field, 430, 432 
hidden files/folders, 16 
hidden menus, 309 
Hide Extensions for Known 

File Types box, 15 
hide ( ) function, 755, 760 
hierarchies, style, 237-238 
history variable, 414 
horizontal element, 298 



horizontal lists, 297-298 
horizontal menus, 309-312 
host names, 83, 608 
hosting services, Web 

connecting to, 814-815 

finding, 813-814 

overview, 812-813 
hosts, 812 

HOUR ( ) function, 702 
Hover event, 756 
hover rule, 777 
hover state, 199, 201 
hoverclass option, 777 
hovered links, 200 
href (hypertext reference) 

attribute, 82, 90, 235 
HSV (Hue, Saturation, and 

Value) color schemes, 

154, 156 
htdocs directory, 493, 

498-499, 502, 588, 872 
htdocs folder, 808 
htdocs path, 855 
. htm extension, 59 
HTML, formatted, 728 
HTML editor, 59-60 
html entities ( ) 

function, 591 
.html extension, 10, 492 
. html ( ) function, 752 
html page, 276 
html style attribute, 240 
HTML tables, 74-75 
html tag, 13, 23 
HTML Tags view, 55 
HTML Tidy program, 

36-38, 51 
HTML Validator extension, 

38, 51-52, 434 
html_entity_decode ( ) 

function, 591 
htmlentities ( ) 

function, 591 
HTTP (hypertext transfer 

protocol), 83 
HTTP error code, 734 



Hue, Saturation, and Value 

(HSV) color schemes, 

154, 156 
hyperlinks 
absolute references, 85-86 
adding to images, 90-92 
anchor tags, 81-82 
block-level and inline 

elements, 82 
defining navigation as list 

of, 294 
lists of, 84-85 
overview, 79-80 
relative references, 86-88 
turning into buttons, 

295-297 
URLs, 82-84 

using images as, 115-118 
using pseudo-classes to 
style, 198-201 
hypertext reference (href) 

attribute, 82, 90, 235 
hypertext transfer protocol 
(HTTP), 83 



i : character, 516 
i variable, 392 
<i> tag, 165, 188 
id attribute 

div element, 429 

versus name attribute, 519 

overview, 125 

select object, 130 

styles, 239 
id identifier, 841 
ID quote, 188 
id session, 582 
IDEs. See Integrated 
Development 
Environments 
IE. See Internet Explorer 
iEorNot . html page, 243 
IE-specific style, 246 
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i f statements 
if -else, 363-365, 



DropB&f&ks 

overview. 359-361 



overview, 359-361 
if -else conditionals 
comparison operators, 

541-543 
complex interaction, 

363-365 
else conditionals, 

538-540 
if conditionals, 535-538 
logical operators, 543-545 
image (img) tags, 92-94, 

254, 482, 577 
image editor, 112 
image-manipulation 

programs, 112 
images 
adding to pages, 89-94 
background, 89, 216-225, 
287 

batch processing, 112-114 
built-in effects, 107-112 
changing formats, 103-104 
enhancing colors, 106-107 
float attribute, 252-254 
formats, 98-103 
layout pitfalls, 251 
as links, 115-118 
in lists, 225-226 
other effects, 112 
overview, 89, 103 
resizing, 104-105 
size of, 224 
tools, 94-98 
transparency of, 479 
using for headlines, 

167-170 
using to simulate 

columns, 287-288 
image-swapping animation 
animate ( ) function, 

482-483 
building global variables, 

481-482 
building page, 480-481 



combined with motion 
effects, 483-487 

overview, 478 

preparing images, 478-480 

setting up interval, 482 
imageTitles.html, 168 
img (image) tag, 92-94, 254, 

482, 577 
imgList array, 482, 486 
inches, 173 

include control structure, 
551 

include_once control 

structure, 551 
incompatibility, browser, 

19,240-241,834 
indentation, 38, 67-68, 238, 

370 

indexes, array, 557-558 
index . html file, 83, 499, 
808 

indexOf ( ) method, 348, 
350 

index . php file, 499, 

808-809 
Indiana University-Purdue 

University Indianapolis 

(IUPUI), 83 
indicators, 785 
inherited styles, 236-239 
init ( ) function 
animation, 464, 475, 482, 

486 

overwriting, 470 
initial value, 342 
injection attacks, 625 
inline elements, 82, 211 
inline images, 92-94 
inner join queries, 715-716 
inner joins 

advantages of, 714-715 

building Cartesian joins 
and, 711-713 

building views to 
encapsulate, 715 

enforcing one-to-many 
relationships, 714 

overview, 710-711 



inner lists 
getting to appear on cue, 

302-305 
hiding, 301-302 
innerHTML property 
overview, 427-428 
preparing HTML 

framework, 428-429 
writing JavaScript, 429 
innerHTML . html 
program, 428 
input. See also user input 
managing with DOM, 

422-426 
processing MySQL 

database, 624-626 
reading from keyboard for 
animation, 468-472 
input button, 137-138 
input elements 
check boxes, 445 
defined, 121 

f ieldset element, 421, 
425 

forms, 261, 264, 432 
select object, 130 
<textarea> tag, 128 
type attribute, 125 
Input Files workspace, 113 
input tag, 124-125, 128, 

132, 136-137 
input-style buttons, 

136-137 
Insert Another Row button, 
653 

INSERT command, 

659-661, 710, 891 
Inset style, 208 
Inspect mode, 54 
install directory, 875 
installation script, 857 
installing 

CMSMS, 872-873 

CMSs, 855-858 

Web servers, 495-496 
int data type, 631 
integer field, 634 
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integer variable, 346 
integers, 353, 357-358, 405, 



DropBoDks 

Environments HE 



ent 

Environments (IDEs) 
Aptana, 57-60, 805 
defined, 41 
Nvu, 55-57 
overview, 55 
integrated help, 337 
Interface Elements 
making sliders, 784-786 
overview, 775-776 
selectables function, 

782-784 
sortables interface, 
776-781 
interface . j s file, 776 
internal double quotes, 508 
internal links, 330 
Internet Explorer (IE) 
Browser Wars, 47-48 
conditional comments, 

240-246 
debugging with, 379-381 
embedded fonts, 166 
floating ToolTips, 94 
margins and padding, 283 
PNG support, 102 
versions of, 49 
Internet Protocol (IP) 

addresses, 812, 821 
interpolation 
double quote, 508 
of variables into text, 
506-507 
interpreted languages, 493 
interpreting radio buttons, 

448-449 
IP (Internet Protocol) 

addresses, 812, 821 
IrfanView program 
batch processing images, 

112-114 
built-in effects, 107-112 



changing formats, 103-104 
choosing formats, 99-102 
enhancing colors, 106-107 
other effects, 112 
overview, 97-98 
resizing images, 104-105 
italics, 61, 175-176, 185, 191 
items variable, 752 
IUPUI (Indiana University- 
Purdue University 
Indianapolis), 83 



j variable, 392 
Java, 336, 494 
JavaScript. See also 

animation; arrays; 

decision-making; 

document object 

model; functions; 

jQuery JavaScript 

library; loops; user 

input 

browser detection, 241 
concatenation, 343-345 
overview, 335-336 
string object, 345-350 
test browsers, 337-338 
text editors, 336-337 
variables, 341-356 
writing programs with, 
338-340 
javascript console, 337 
JavaScript event object, 472 
JavaScript Object Notation 
(JSON) 
generating tables with, 

798-800 
overview, 795-796 
using with AJAX, 797-798 
using with PHP, 796-797 
jEdit text editor, 46 
jello layouts, 288, 291 



joins 

combining tables with 

inner, 710-715 
many-to-many, 716-722 
overview, 699 
Joint Photographic Experts 

Group (JPG/JPEG) 

format, 98-99, 102 
jQuery JavaScript library. 

See also Interface 

Elements 
coding with, 746-747 
downloading, 740-741 
getting started with, 

743-746 
handling XML response 

with, 789-795 
interfacing with official UI 

plugin, 764-775 
jQuery object, 747-748 
managing events through, 

756-757 
modifying list items, 

751-752 
overview, 739-740 
selecting elements in, 

748-756 
special effects, 759-764 
using documentation, 

741-743 
using for client-side CMSs, 

887-888 
jQuery object, 747-748, 

756 

jQuery subdirectory, 745 
jQuery. each ( ) function, 
795 

jQueryHello.html page, 
745 

. j s extension, 492 

JSON. See JavaScript Object 

Notation 
json_decode( ) function, 

797 

json_encode( (function, 
797 
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name* 

keyboard script, 469 
keyboard . html page, 468 
keyboard . j s script, 469 
keyboards, reading input 
from for animation 
building keyboard pages, 

468-469 
keycodes, 472 
overview, 468 
overwriting init ( ) 

function, 470 
responding to keystrokes, 

471-472 
setting up event handlers, 
470-471 
keycodes, 472 
Keydown event, 756 
keyListener ( ) function, 

470-471 
keystrokes, 471-472 
keywords, 658 



<label> tag, 124, 262 
labels, 121-124 
language construct, 597 
$ language variable, 568 
languages, 44, 493, 806 
lap++ operator, 372 
latinl_swedish_ci 

syntax, 666 
Law of Seven, 836 
layouts. See also floating 
page layouts; 
positioning 
content separate from, 

21,849 
pitfalls, 249-252 
size of, 323 
table-based, 78 
LCD panel, 170 



left attribute, 316, 321, 

331-332 
left brace ({), 367, 579 
left margin, 68 
left property, 465, 475 
legends, 121 

length property, 347, 407, 
443 

less than operator (<), 361 
less than or equal to 

operator (<=), 361 
Letter-spacing tool, 181 
level of technical expertise, 

834-835 
levels, style. See also 

external style sheets 
local styles, 227-230 
overview, 227 
li a f loat : left value, 

298 

li elements, 298, 308, 

751-752 
$ ( "li" ) selector, 752 
<li>tag, 63, 65,68,85 
lib subdirectory, 745 
libraries, 726. See also 

jQuery JavaScript 

library 
light beams, 146 
li : hover class, 303, 306 
li: hover ul attribute, 

303 

like clause, 625, 670, 673 
line numbers, 41 
$line variable, 596 
linear function, 762 
$lineAr ray variable, 596 
Line-height tool, 181 
link mechanism, 86 
link tables, 699, 718-722 
<link> tag, 231, 234-235, 

245-246, 274 
linking behavior, 79 
links 

absolute references, 85-86 
adding to images, 90-92 
anchor tags, 81-82 



block-level and inline 

elements, 82 
to directories, 602-603 
lists of, 84-85 
navigation as list of, 294 
overview, 79-80 
relative references, 86-88 
turning into buttons, 

295-297 
URLs, 82-84 

using images as, 115-118 

using pseudo-classes to 
style, 198-201 
Linux, 44, 161, 165 
list elements, 62 
list( ) function, 597-598 
listed fields, 685 
listeners 

keyboard, 470-471 

mouse, 475-476 
list-reappearing code, 303 
lists 

definition, 68-70 
drop-down, 437-440 
dynamic, 298-305 
of fonts, 164-165 
generating, 602-603 
of links, 84-85 
modifying items in jQuery, 

751-752 
MySQL database 

definition, 615-617 
nested, 65-68 
ordered, 63-65 
overview, 61 

problems with single-table 

databases, 684-685 
styling, 293-298 
unordered, 61-63 
using images in, 225-226 
list-style- image 

attribute, 226 
list-style- type 

attribute, 308 
literal values, 344 
load( ) function, 747, 791 
local file system, 492 
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local scoping, 580 
local styles, 227-230, 239 
j|c£ 

M^L^h^t: : , v^.'-ons, 
608 

localhost directory, 809 
localhost mechanism, 
637 

localvar variable, 403 
location variable, 414 
$logData array, 596 
log. html page, 384, 385 
logical errors, 378, 383-386 
logical operators, 543-545 
loops. See also debugging 

errors, 377-378 

for, 371-375, 406-407, 
548-553 

foreach, 551, 565-570, 
613-614, 781 

nested, 611 

overview, 371 

while, 375-376, 548-549, 
612-613, 616 
loose typing, 504 
Lorem Ipsum text, 274 
lossless compression, 100, 
102 

lowercase tags, 14 
Lucida Console fonts, 164 
Lynx browser, 50 



M 



m: character, 516 
M: character, 516 
Mac TextEdit text editor, 

42-43 
macros, 41, 44 
mag i c_quo t e s_gpc 

directive, 597 
mail server, 805 
main( ) function, 41 1-412 
Manage Accounts feature, 

820 

Manipulation section, 742 



many-to-many joins 
link tables, 718-722 
overview, 716-718 
many-to-many 

relationships, 698 
many-to-one joins, 718 
many-to-one relationships, 
714 

margin : auto attribute, 
291 

margin-bottom attribute, 
325 

margin-left attribute, 

215,260, 288, 291,296, 

306, 325 
margin-right attribute, 

215,291,325 
margins 
box model, 212-216 
setting with float 

attribute, 259-260 
three-column pages, 283 
margin- top attribute, 325 
markup tags, 14, 21 
master pages, 250 
match ( ) method, 450, 

452, 454 
math operators, 706 
Math, ceil ( ) function, 

355, 358-359 
mathematical operations, 

703 

Math, floor ( ) function, 
355 

Math, random ( ) function, 

357-358 
Math, round ( ) function, 

355 

max_length property, 621 
max_x constant, 467, 486 
maxlength attribute, 125 
MB (megabytes), 96 
MediaWiki engine, 494 
megabytes (MB), 96 
megapixels (MP), 95 
memory, pattern, 456-457 



menu div element, 295, 309, 

330-331 
menu links, 295 
menu systems 

CMSs, 861-863 

fixed, 327-329 

generating, 894 

horizontal, 309-312 

overview, 306-307 

vertical, 307-309 
Mercury Mail mail server, 
806 

meta tag, 23, 36 
metadata, 621 
method attribute, 519, 

521-526, 529 
methods 
JavaScript string object, 

347-350 
jQuery object, 748 
OOP, 493 
mice, following for 
animation 
building mouse listeners, 

475-476 
HTML, 473-474 
initializing code, 475 
overview, 472-473 
Microsoft Access, 635 
Microsoft Excel, 678 
Microsoft Internet Explorer. 

See Internet Explorer 
Microsoft SQL Server, 635 
min-height attribute, 

284-285 
Minified — Gzipped 

option, 740 
minute ( ) function, 702 
Miscellaneous menu, 53 
missionlD field, 711, 713 
MochiKit JavaScript library, 
740 

modal dialog, 340 
modal editor, 44 
mode, defined, 588 
modifiers, 660 
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modifyListltems ( ) 
method, 751 

DropB@@tcg ram 

I Monaco font, 164 

Monochramatic (mono) 

color scheme, 157 
monospace font-family 

attribute, 204 
Monospace fonts, 163 
MONTH ( ) function, 702, 

706-708 
monty . php program, 

529-530 
Moo Tools JavaScript 

library, 740 
Moodle CMS, 851-852 
Moo. fx JavaScript library, 

740 

Mosaic browser, 47 
motion 
automatic, 476-478 
image-swapping 

animation combined 
with, 483-487 
Mousedown event, 756 
mouseListener event, 475 
mouseover event, 762 
mouses, following for 
animation 
building mouse listeners, 

475-476 
HTML, 473-474 
initializing code, 475 
overview, 472-473 
movement . html page, 469 
movement . j s script, 462, 

469, 472, 477 
moveSprite( ) method, 

462, 472 
Mozilla browser, 50. See 
also Firefox browser 
MP (megapixels), 95 
msql_query( ) function, 
610 

multi-character delimiter, 
592 



multi-column floating 

layout, 297 
multidimensional arrays 
functions, 411-412 
overview, 408-409 
in PHP, 560-565 
setting up, 409-411 
multi-language support, 44 
multi-layer list, 299 
multi-line comment (J* *[) 

character, 232, 340 
multi-line text input, 

127-128 
multimedia tools, 42 
multipage Web sites, 

829-830. See also Web 
sites 

multiple attribute, 442 

multiple files, 44 

multiple selection 
check boxes, 131-133 
coding select object, 

441- 442 
drop-down lists, 129-131 
overview, 440 

radio buttons, 133-135 
writing JavaScript code, 

442- 444 
multiple_key property, 

621 

multiSelect.html page, 
441 

My Computer window, 15 
$myArray array, 569 
myClass class, 748 
myFirst.html file, 10 
MySQL databases 
allowing user interaction, 

620-626 
creating, 825-826 
data types, 631-632 
finding server name, 827 
improving output format, 

615-619 
overview, 605, 634-635 
phpMyAdmin, 637-649 
practicing with, 636-637 



retrieving data from, 

605-615 
root password, 810 
three-tiered architecture, 

636 

mysql_connect ( ) 

function, 608-609, 611 

mysql_error ( ) function, 
609 

mysql_f etch_array ( ) 

function, 613 
mysql_f etch_assoc ( ) 

function, 612-613, 619 
mysql_f etch_f ield ( ) 

function, 613, 619, 621 
mysql_f etch_obj ect ( ) 

function, 613 
mysql_f etch_row ( ) 

function, 613 
mysql_real_escape_str 

ing ( ) function, 625 
mysql_select_db ( ) 

function, 609 
myStyle .ess file, 232-233 

A/ 



name attribute, 134, 446, 

519,529, 621 
name field, 669 
$name variable, 507, 614, 

617 

named font sizes, 173 
names, color, 145-146 
name-value pair, 144 
National Center for 
Supercomputing 
Applications (NCSA), 47 
navigation 
defining as list of links, 294 
DOM, 413-414 
menus, 293 
schemes, 829 
structure, 838 
NCSA (National Center for 
Supercomputing 
Applications), 47 
negative value, 319 



918 HTML, XHTML, and CSS Att-in-One Desk Reference For Dummies 



nested element, 67 

nested lists, 65-68, 299-301, 



0 



DropB^©ks 

nestedList . html. 



nestedList . html, 65 
nesting if statements, 

368-370 
Netscape browser, 47 
New Database Connection 

button, 691 
New Table icon, 688 
newline (\n) character, 
407, 434, 504, 508, 590, 
596 

Nimbus fonts, 164 
no -repeat value, 223 
normal forms 

first, 695-696 

second, 696-697 

third, 697-698 
normal state, 199 
normalizing data 

ER diagrams, 687-694 

identifying relationships 
in data, 698-699 

introducing normalization, 
695-698 

overview, 683 

problems with single-table 
data, 683-687 
not equal operator (! =), 361 
Notepad icon, 16 
Notepad text editor, 42 
Notepad++ text editor, 662 
not_null property, 621 
NOW ( ) function, 702, 704 
numbers 

adding to JavaScript, 
350-352 

random, 357-359 
numeric data, 633 
numeric fields, 675 
numeric values, 351, 368, 621 
numerical index, 556 
Nvu IDE, 55-57 



object-oriented 

programming (OOP), 

346, 493 
objects, 346, 353, 493, 748 
oil paint filter, 110 
<ol> indicator, 65, 67 
onChange option, 778-781, 

786 

onclick attribute, 421-422 
onclick event, 425, 432, 

462, 481 
one string, 556 
one verse function, 399 
one-dimensional arrays, 

555-559 
one-to-many relationships, 

698, 714 
one-to-one relationships, 

698 

onload event, 462 
only_cookies directive, 
582 

onReadyStateChange 

member, 732 
onselect option, 783 
onSlide( ) function, 786 
OOP (object-oriented 

programming), 346, 493 
opacity option, 777, 783 
Open Document 

Spreadsheet, 678 
open member, 732 
open ( ) method, 733, 

737-738, 772 
opendir ( ) function, 

600-603 
Opera browser, 50 
operating system (OS) 

shell, 46 
operators 
comparison, 541-543 
logical, 543-545 
<option> tag, 130, 442-443 
or die( ) clause, 609, 611 
OR logical operator, 541 
Oracle, 634 



order by clause, 675 
order ( ) function, 445 
ordered lists, 63-65 
ordinary text field, 432 
. org domain, 84 
OS (operating system) 

shell, 46 
other field, 685 
outer list, 68 
output 
building XHTML from PHP, 

507-511 
generating MySQL 

database, 626 
innerHTML property, 

427-429 
JavaScript, 340 
managing with DOM, 

422-426 
MySQL databases, 

615-619 
output directory, 116 
output div, 434, 442, 

746-747 
output text, 401 
output variable, 412, 505 
$output variable, 508, 580 
outset border, 296 
Outset style, 208 
over line attribute, 180 
overloaded operator, 354 
overriding styles, 238-239 
overview diagrams, site, 

836-837 
$ownerOf Card array, 564 
oxWheelsl .html page, 26, 

29, 36 

oxWheels3 .html page, 33 
oxWheels4 .html page, 34 
oxWheels5 .html page, 35 
oxWheels .html page, 36 



p { } selector, 152 

<p> tag, 14, 15, 33, 82, 187, 

171, 192, 793 
Packed option, 740 
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padding, 212-216, 279, 283 
padd ing-left attribute, 

I 321 

page element, 840 
page flow, 271 
page layouts. See layouts 
page names, 83 
Page preview, 44 
page sketches, 841 
page templates 
building data framework, 

846-847 
building XHTML template 

framework, 841-843 
creating page styles, 

843-846 
overview, 839-840 
sketching page design, 
840-841 
page validation. See 

validation, Web page 
pagelD number, 893 
page-level style rule, 240 
page-level styles. See also 
colors; fonts; selectors 
background images, 89, 

216-225, 287 
borders, 205-211 
box model, 211-216 
using images in lists, 
225-226 
page -number parameter, 
892 

pageUpdate ( ) function, 
792 

page View view, 891, 894 
Paint.net, 98 
Palatino font, 164 
paragraph tag. See <p> tag 
paragraphs 

applying float attribute, 
255-257 

defining more than one 
kind of, 185-187 

labels, 123 



style attribute, 229 
styling identified, 187-188 
parallel pages, 241 
parameters, 348, 400-401, 

471, 733 
parent array, 560 
parent element, 215, 237, 

259, 302 
parentheses, 578, 660 
parseFloat ( ) function, 

355, 426 
parselnt ( ) function, 

354, 426, 465 
parsing XML, 793-795 
partial borders, 210-211 
partial information, 

searches with, 671 
password fields, 120, 

126-127, 430, 432, 641 
passwords, 432, 608, 

639-644 
pattern memory, 456-457 
paused programs, 389-391 
percentage widths, 271 
percentages (%), 174, 

324-325, 671 
period (.) symbol, 452, 455, 

505 

permissions, file, 817-818 
perspective, 388-389 
phone numbers, 450 
Photoshop 8BF format, 112 
PHP. See also arrays; 
control structures; 
MySQL databases 
building CMS pages with 

includes, 889 
building XHTML output, 

507-511 
coding with quotation 

marks, 503-504 
configuration in secure 

mode, 812 
creating first program 

with, 501-503 
functions, 575-581 
libraries, 806 



MySQL and, 635 
overview, 494, 501 
relationship to XHTML 

forms, 513-529 
in server-side 

programming, 492-493 
session variables, 582-586 
using with JSON, 796-797 
variables, 504-507 
writing pages to read from 

tables, 892-894 
. php extension, 492, 502 
phpinfo ( ), 498-500 
phpMyAdmin program 
adding users, 644-647 
changing root passwords, 

639-644 
configuration file, 642, 

645-646 
leaving open, 812 
making databases with, 

649-655 
overview, 635-639 
re-creating databases 

with, 680-681 
running SQL script with, 

661-664 
using on remote servers, 
647-649 
pipe ( | ) delimiter, 591, 596 
pixels (px), 95, 146, 148, 

172-173, 324 
Pixia graphic editor, 98 
plain text, 12, 124 
plugins, 41, 818 
plus sign (+) character, 344, 

353-354, 456 
PNG (Portable Network 

Graphics) format, 102 
pointer arrow (=>), 557, 570 
pointers, 588 
points (pt), 172 
Poll module, 865 
populating XML 

documents, 789 
portable browsers, 50 
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Portable Network Graphics 
(PNG) format, 102 

i I t f i V/*l ^ ° 1 1 ■ t 

position attribute, 316, 

327, 331 
position: relative 

attribute, 327 
positioning. See also 
absolute positioning 
determining layout 

schemes, 332 
dialog box, 774 
overview, 313 
types of, 327-332 
post mechanism, 621 
post method, 522, 524-526, 
529 

post requests, 625 
$_POST superglobal, 526 
pound sign (#), 148 
precedence, style 

definition, 240 
predefined animation, 

759-762 
Preferences dialog box, 

59-60 

preg_split( ) function, 
572 

presentation, 78 
Preview button, 877 
primary attribute, 285 
primary keys, 633, 664-666, 

695, 714 
primary layout, 839 
primary_key property, 621 
print ( ) function, 558 
print statement, 503, 781, 

789 

printing data, 614-615 
print-oriented layout tool, 
173 

print_r ( ) function, 

558-559 
printResults ( ) 

function, 624, 626 



Privileges section, 826 
procedural programs, 493 
processlnput ( ) 

function, 624-626 
production, Web site, 

847-848 
program name parameter, 

733 

programming. See also 
JavaScript; server-side 
programming 
event-driven, 424 
text editors, 42-46 
programs 
"Ants Go Marching, The", 

396-402, 407-408 
Aptana Debug Mode, 

389-392 
creating with PHP, 

501-503 
that roll dice, 358-359 
two-dimension arrays, 

408-412 
Web development, 41-42 
writing with JavaScript, 
338-340 
project subdirectory, 502 
prompt statement, 342, 399 
properties 
changing DOM with 
Firebug, 414-415 
OOP, 346 
Prototype JavaScript 

library, 740 
pseudo-classes 
best link practices, 201 
styling link states, 199-200 
styling standard links, 
198-199 
pt (points), 172 
punctuation characters, 455 
Pushbutton theme, 868 
px (pixels), 95, 146, 148, 
172-173, 324 



0 



queries, 610-611. See also 
jQuery JavaScript 
library; Structured 
Query Language 
Query mode, 693-694 
question class, 192 
question mark (?), 523 
question subclasses, 192 
quotation marks, 20, 82, 
421-422, 503-504, 
507-509 
quotes . php program, 558 



r value, 588 
r+ value, 589 
radio buttons 

creating, 133-135 

forms, 120 

interpreting, 448-449 

name value, 529 

overview, 446-448 
rand ( ) function, 558, 577 
random access, 589 
random float, 358 
random numbers 

creating integer within 
range, 357-358 

overview, 357 

program that rolls dice, 
358-359 
random seed, 357 
rasterbased image formats, 
103 

raw images, 100 

RDBMSs (relational 

database management 
systems), 605, 634 

Read permission, 818 

readdir ( ) function, 
600-603 

readKeys . html page, 472 
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readyState property, 732, 
735, 737-738 



DropBsste 

records 



records 
adding to SQL tables, 

660-661 
defined, 611,630 
editing SQL, 676-677 
fields in, 631 
selecting subsets of in 
SQL tables, 669-671 
specifying length of, 
632-633 
red banner, 28 
red class, 195 
red error icon, 382 
Red-eye reduction filter, 112 
references 
absolute, 85-86 
defined, 426 
relative, 86-88 
regex.html page, 453 
regexp keyword, 674 
register_globals 

feature, 527 
registering domain names, 

822-825 
regular expressions 
basics of, 452-453 
conducting repetition 

operations, 456 
marking beginning and 

end of lines, 454 
overview, 449-452 
special characters, 455 
SQL table searches with, 
674 

using characters in, 454 
working with pattern 
memory, 456-457 
rel = "stylesheet" 

attribute, 235 
relational data modeling, 
629 



relational database 

management systems 

(RDBMSs), 605, 634 
relationships, data, 687, 

698-699, 714, 718 
relative measurement units, 

173-174 
relative positioning 

techniques, 313, 332 
relative references, 86-88 
reliability, single-table 

database, 686 
remembered patterns, 

456-457 
remote servers, 647-649, 

812 

remote site management 
file permissions, 817-818 
using FTP, 818-821 
Web-based file tools, 

815-817 
remuneration strategy, 832 
repeat value, 223 
repeated digits, 151 
repeating background 

images, 222-225 
repeat -x technique, 

223-225 
repeat-y technique, 

223-225, 288 
repetition, single-table 

database, 686 
repetition operations, 456 
replace ( ) method, 348, 

452 

request method, 733 
request object, 737-738, 
790 

$_request superglobal, 
521, 526-527, 532, 559, 
778 

$request variable, 611 
request . readyState 

property, 738 
request . status 

property, 734 



require control structure, 
551 

require_once control 

structure, 551 
resampling, 105 
reset buttons, 138 
resizing, image, 104-105 
Resizing tool, 97 
responseText object, 732, 

791, 798 
responseXML object, 791 
Restore Defaults button, 

345 

restricted option, 786 
Result line, 28 
result variable, 412, 443 
$result variable, 610, 612 
return control structure, 
551 

return statements, 

579-581 
return string, 433 
reusing external style 

sheets, 233-234 
revalidating, 29 
Reverse Engineer 

command, 693 
RGB color model, 154 
Ridge style, 208 
right brace (}), 367, 579 
road map, 396 
rollDice.html page, 359 
rollDice.php program, 

575 

rollDie( ) function, 578 
RollDie . html code, 358 
root access, 826 
Root Namespace line, 28 
root passwords, 639-644, 
810 

root users, 641 
$ row variable, 612-614 
rows, 72-78, 409 
rows attribute, 128 
rowspan attribute, 76-77 
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rule names, 144 



run program, 392 

DropBOtJjCS 100 



s : character, 516 
Safari browser, 50 
Sans serif fonts, 162 
saturation, color, 154 
Saturation feature, 107 
Save Configuration button, 
865 

Save Selected Thumbs as 
Individual Images tool, 
116 

saveSchedule .php file, 
781 

Saving to different formats 

tools, 98 
sayHi ( ) function, 425, 

429 

sayValue ( ) method, 

751-752 
Scintilla text editor, 46 
scope 
function, 402-404 
managing in PHP, 580 
scope.html page, 402 
screen readers, 251 
screen space, 129 
script class, 195 
script installers, 814 
<script> tag, 339, 461, 

462, 744-746 
Script. aculo. us JavaScript 

library, 740 
scripting language, 336, 418 
seamless texture, 219 
search engines, 13, 170 
search forms, 621-624 
search ( ) method, 348 
searching SQL tables 
for any text in fields, 673 



for ending value of fields, 

671-672 
with partial information, 

671 

with regular expressions, 
674 

search . php program, 622 
SECOND ( ) function, 702 
second normal form, 

696-697 
section names, 271 
Secure FTP (SFTP), 821 
Secure Socket Layer (SSL) 

technology, 127 
security, 809-812, 831 
Security Alerts, 496 
select code, 441 
select command, 659, 

661, 674, 677 
Select Database Connection 

window, 692 
Select event, 756 
select lists, 120 
select objects, 121, 130, 

438-439, 441-442, 448 
select statement, 663, 

668, 670, 710 
<select> tag, 130 
selectables function, 

782-784 
selected property, 443 
selectedclass option, 

783 

selecting elements in 
jQuery 
all elements of specific 

type, 749-751 
by class name, 753-756 
overview, 748-749 
selectors 
defined, 143 

defining classes, 191-195 
defining more than one 

kind of paragraph, 

185-187 



defining multiple styles at 

once, 203-204 
div and span, 195-198 
emphasis and strong 

emphasis, 188-190 
overview, 185 
selecting in context, 

201-203 
styling identified 

paragraphs, 187-188 
testing, 276 

using pseudo-classes to 
style links, 198-201 
selLanguage variable, 

441,443 
semantic navigation, 839 
semicolon (;) character, 

340, 503, 658 
send( ) method, 732-733, 

737, 792 
sentry variable, 372-374 
separate function, 736 
Serif fonts, 162 
$_SERVER array, 569-570 
servers 
client-side development 

systems, 804-805 
creating with XAMPP, 

806-812 
domain names, 821-825 
handling XML response 
with jQuery, 790-792 
managing data remotely, 

825-827 
managing remote site, 

815-821 
overview, 803-804 
server-side systems, 

805-806 
synchronous AJAX 
connections, 733 
using phpMyAdmin on 

remote, 647-649 
Web hosts, 812-815 
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server-side editing features, 



817 



DropBMKS 

server-side Drosrami 



(SSIs), 



server-side programming. 
See also PHP 
AJAX, 726 

inspecting phpinfo ( ), 

498-500 
installing Web server, 

495-496 
languages, 493-494 
overview, 491-492 
starting server, 496-497 
testing installation, 
497-498 
server-side systems, 

805-806, 850 
$_SESSiON superglobal, 

585-586 
session variables 
adding to code, 585-586 
overview, 582-584 
session_start ( ) 

function, 585 
Set Advanced Options 

button, 114 
setColor ( ) function, 420 
setlnterval ( ) function, 

477-478, 480, 483 
Settings For All Images 

dialog box, 114 
setupTrigger ( ) 

function, 755 
SFTP (Secure FTP), 821 
shaded styles, 208 
sharpen filter, 108 
shopping carts, 726 
shortcut, border, 209-210 
Show effects, 759 
show ( ) function, 760 
showChoices ( ) function, 
442 

showContact . php 

program, 610 
showDate . php program, 

515-516 



showSurprise ( ) 
method, 755-756 

showSurprise . html 
program, 753 

. shtml extension, 886 

simple.html program, 
415 

single digits, 151 
single equal sign (=), 536, 
670 

single quotes ('), 597, 789 
single-element tags, 427 
single-table databases 

deletion problems, 687 

fields that change, 
686-687 

lists, 684-685 

overview, 683-684 

repetition and reliability, 
686 

singletag elements, 432 
Site Building section, 864 
site management 

file permissions, 817-818 

using FTP, 818-821 

Web-based file tools, 
815-817 
site plans 

creating overviews, 
836-837 

diagrams, 837-839, 846 

overview, 835-836 
sites, Web. See Web sites 
$sixCount variable, 552 
size attribute, 125, 130 
sketches, page design, 

840-841 
Skiljan, Irfan, 97 
slice ( ) method, 348 
Slide effects, 759 
slideDown element, 760 
sliders, 784-786 
slideToggle element, 760 
slideUp element, 760 
smarty tags, 874 
Smarty template engine, 
881 



Social Networking element, 
302 

software. See also specific 
software by name 
cost of, 40 
patents, 102 

Web development tools, 
39-40 

Web page design, 16-17 
Solid style, 208 
Sortable class, 776 
sortables interface 

basic sorting, 776 

onchange, 778-781 

options, 777-778 

overview, 776 
sortForce option, 

769-771 
sorting options, 768-771 
sorting responses, 675-676 
sortList option, 769 
$ . SortSerialize ( ) 

function, 778 
source (src) attribute, 94 
source code, 30, 434-436 
SourceForge . net page, 
495 

spaces, 67, 345 
span element 
organizing pages by 
meaning, 196-197 
overview, 195-196 
tables, 197-198 
<span> tag, 196 
spanning rows/columns, 
75-78 

special characters, 455 
special effects, jQuery 
custom animations, 

762-764 
overview, 759 
predefined animations, 
759-762 
spell checker, 21 
split complementary 
system, 157 
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split ( ) function, 570, 
572-573, 596-598 

4| ) *<■■>. 464, 

sprite global variable, 

463-464 
sprite tag, 482 
sprite variable, 475 
spritelmage img 

element, 486 
spritelmage variable, 482 
sprites 
combining motion effects 

and swapping, 487 
defined, 460 
image-swapping 

animation, 482-483 
motion effects, 464-466 
SQL. See Structured Query 

Language 
SQL Server, 635 
$sql variable, 610, 624-625 
SQLite open-source 

database, 635 
square brace ( [ ] ) syntax, 
405 

src (source) attribute, 94 
src property, 461, 482 
$srchField value, 625 
$srchVal value, 625 
ssAblaze template, 878 
SSIs (Server-Side Includes), 

848, 884-887 
SSL (Secure Socket Layer) 

technology, 127 
standard links, 198-199 
standard text fields, 

124-125 
standards compliance, 

40, 50 
Stanicek, Petr, 155-156 
states, link, 198-200 
static layout, 322 
status element, 414-415 
status property, 732, 

734-735 
status, request, 734-735 
statusText property, 732, 

735 



Step Into button, 391 
storage, data, 342 
storeQuery table, 710 
storyl.html file, 886 
str_replace ( ) function, 

591-592 
streams, 588-589 
strikethrough . html 

code, 179 
string data, 345, 353, 505 
string object 

length property, 347 

OOP, 346 

overview, 345-346 
using methods to 
manipulate text, 
347-350 
string value, 362, 421 
string variable, 349, 426, 

433-434, 443 
stringMethods . html 

page, 348 
strings, 346, 505, 570-573 
strong emphasis, 93, 

188-190 
<strong> tag, 93, 188 
Structured Query Language 
(SQL) 
AUTO_INCREMENT, 

664-666 
data types, 631-632 
DDL, 630 
DQL, 630 

editing records, 676-677 
exporting data and 

structure, 677-682 
functions, 702-703 
injection attacks, 625 
overview, 657 
running script with 

phpMyAdmin, 661-664 
selecting data from tables, 

666-676 
writing code by hand, 

657-661 
style attribute, 207, 239, 

416 

style definitions, 240 



style element, 143, 204, 227 
style sheets. See also 

external style sheets; 

lists; page-level styles 
attaching to templates, 

881 

cascading styles, 235-240 
changing colors, 144-145 
conditional comments, 

240-246 
levels of style, 227-230 
menu systems, 306-312 
overview, 141-143, 227 
setting up, 143-144 

<style> tag, 143, 152, 229, 
232, 235, 246 

styles 
border, 207-208 
CMSMS, 882 
creating page, 843-846 

sub-arrays, 560 

subdirectories, 83 

subdomains, 83, 814, 822 

sub-elements, 306 

sublists, 299 

submit attribute, 520 

submit buttons, 121, 137, 
877, 882 

Submit Poll section, 865 

sub-objects, 414 

subscripts, 183-184 

subsets of records, 669-671 

substring ( ) method, 
348, 350 

SUBTIMES(A, B) function, 
702 

success function, 792-793 
suit arrays, 560 
sum variable, 351 
superglobals, 525-526, 585 
superscripts, 183-184 
super-slow mode, 391-392 
surface div, 462, 469 
surprise class, 753, 

755-756 
( " . surprise" ) selector, 

755 

swing function, 762 
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switch statement 
comparing with, 545-547 
|e^s^is with, 

important tips, 367-368 
overview, 365-366 
Synchronization 

command, 693 
synchronization trigger, 733 
synchronous AJAX 
connections 
building HTML form, 731 
checking status, 734-735 
creating 

XMLHttpRequest 
object, 731-732 
opening connections to 

server, 733 
overview, 728-731 
sending request and 
parameters, 733 
SynEdit text editor, 46 
syntax coloring, 49 
syntax errors, 383 
syntax highlighting, 

43, 336, 345 
syntax rules, 658 



tab character, 67 
tabbed browsing, 48 
table data, 70 
table headers, 70, 73 
table property, 621 
table rows, 70 
table sorter, 767-771 
<table> tag, 70, 72, 

618-619 
table-based layouts, 19, 78 
tables 

building, 70-72 

creating in DBDesigner 4, 
688-690 

defined, 630 

defining, 72-75, 633-634 



div and span elements, 

197-198 
generating with JSON, 

798-800 
layout pitfalls, 250-251 
link, 718-722 

making basic with jQuery 

UI plugin, 767-768 
problems with, 78 
spanning rows and 
columns, 75-78 
SQL, 659-676 
steps to create, 660 
using inner joins to 

combine, 710-715 
writing PHP pages to read 

from, 892-894 
XHTML, 617-619 
tablesorter class, 768 
tablesorter ( ) function, 

767-768 
tableSpan code, 78 
tabs (\t) characters, 504, 

591 
tag pairs, 14 
tags 

CMSMS custom, 882-884 

Web page, 12-15 

XHTML, 20 
Tahoma fonts, 164 
<td> tag, 70, 74, 77-78 
technical expertise, user 

level of, 834-835 
technical frameworks, 831 
template . html, 22, 60 
templates 

Aptana IDE, 60 

CMSMS, 873, 880-881 

page, 839-847 

smarty tags, 874 

XHTML, 832 
temporary borders, 

276-277, 282 
terminate button, 391 
test browsers, 337-338 
testing code, 41, 833 
test . php program, 499 
Tetrad color scheme, 157 



text 

alignment, 180-181 
"Ants Go Marching, The" 

program, 401-402 
interpolating PHP 

variables into, 506-507 
managing input and 

output with DOM, 

422-426 
manipulating with 

JavaScript string 

methods, 347-350 
SQL table searches for 

any in field, 673 
text areas, 120, 430, 432 
text boxes form elements, 

120 

text data type, 632 
text editors 

alternative, 46 

basic, 42-43 

building tables in, 74-75 

client-side development 
system, 804 

Emacs, 45-46 

JavaScript, 336-337 

Notepad++, 43-44 

overview, 42 

VI and VIM, 44-45 

versus word processors, 
9-10 

text fields, 426, 437 
text file manipulations 

CSV files, 590-600 

overview, 587 

reading from, 594-596 

writing text to files, 
588-590 
text formatting. See fonts 
text labels, 121 
text manipulation tools, 181 
Text Size option, 170 
text variable, 353, 400 
text-align attribute, 

180-181 
text-align: center 

rule, 214-215 
<textarea> tag, 128 
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text-decoration 

attribute, 178-180, 296 

none 

Jrjp^rt/ 

TextEdit text editor; 42-43 
TextFX extension, 44 
Text-indent tool, 181 
text-only browsers, 51 
text-style inputs 
multi-line text input, 

127-128 
overview, 124 
password field, 126-127 
standard text field, 
124-125 
Text-transform tool, 181 
<th> tag, 70, 73, 74 
$theFile variable, 588 
Theme Manager, 878 
themes, 829, 867-868, 

877-879 
themes directory, 868-869 
$theMode variable, 588 
$theVar variable, 545, 548, 
555 

thing . php file, 502 
third normal form, 697-698 
this keyword, 762, 800 
thread window, 390 
three-column floating 
layout design 
overview, 280-281 
problems with, 283-284 
specifying min-height, 

284-285 
styling three-column 
pages, 281-283 
three-tiered architecture, 
636 

thumbnail images, 115-118 
Thumbnails tool, 116 
tilde (~) character, 83, 591, 
762 

tiled images, 219-220 
time data type, 632 



time interval, 478 
Timer.html page, 476 
Times New Roman fonts, 
164 

title attribute, 94 
<title>tag, 13,30,31 
TLS (Transport Layer 

Security), 585 
toLowerCase ( ) method, 

348-349 
ToolTips, 94 

top attribute, 317, 321,331, 

465, 475 
toString ( ) function, 355 
total element, 585 
toUpperCase ( ) method, 

348-349 
<tr> tag, 70, 72, 73 
traditional measurements, 

173 

Transport Layer Security 

(TLS), 585 
Trebuchet MS font, 164 
Triad color scheme, 157 
trigger class, 755 
true expressions, 363 
TSCu_Comic font, 164 
tutorials, 742 
. tv domain, 84 
two slashes (/ /) character, 

83, 340 
$two variable, 556 
two-column floating layout 
design 
adding preliminary CSS, 

274-275 
advantages of, 280 
building XHTML, 273-274 
designing pages, 271-273 
setting up floating 

columns, 277-278 
temporary borders, 

276-277 
tuning up borders, 
278-279 



two-dimension arrays 
functions, 411-412 
overview, 408-409 
setting up, 409-411 
. txt files, 15, 603 
txtName field, 425-426 
txtOutput field, 425 
type attribute, 125, 136, 

138, 339, 520, 621, 790 
TypeError: request. 
loadGroup has no 
properties error 
message, 391 



fonts 




u 


i 


UI library, jQuery See user 


interface library, 


jQuery 




. uk domain, 84 


[ 
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634, 660 
varchar field, 684 
variable interpolation, 509 
variable scope, 402-404 
variable types, 346, 353, 362 
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fieldsets, 267-268 
measurement units, 206 
menus, 331-332 
overview, 94 
window object, 414 
Windows Notepad, 42 
Windows Security Alerts, 

496 
Word, 42 

word boundaries, 455 
word processing, 9-10, 42, 
678 

WordPress CMS, 852-853 
Word-spacing tool, 181 
Work As box, 113 
World Wide Web 

Consortium (W3C), 20. 

See also W3C Validator 
Write permission, 818 
writing code. See also 

programs 



Index 929 



PHP pages to read from 
tables, 892-894 



DropB$0k 

I text to files. 588- 



text to files, 588-590 
WYSIWYG technology, 17, 
39, 55, 74, 874 



x global variable, 463 
x parameter, 465 
XAMPP Control Panel, 497, 
637 

XAMPP Controller, 496 
XAMPP Directory 
password, 811 
XAMPP program 
adding files, 808-809 
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xf d database, 646, 651 
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